Flutter UI library based on IBM's Carbon Design System đź’Ž

Overview

Flutter Carbon

cover

‌Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

‌ The goals of the design system include improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

Carbon Flutter đź’Ž

Flutter Carbon is an unofficial implementation of Carbon Design System using Flutter framework. It provides Flutter developers a collection of widgets to build apps and user interfaces. Adopting the package enables developers to use consistent styles and behavior in prototype and production work.

⚠️ WARNING: The project is still under development and not ready for production.

Documentation

The full documentation of the project can be found here

Screenshots

toggle

overflow-menu

textfield

breadcrumb

notification

forms

buttons

Made with ❤️

You might also like...

A grid-based layout system for Flutter, inspired by CSS Grid Layout

A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Dec 24, 2022

CartToGo is an IoT-based smart system that is connected to an iOS mobile application

CartToGo is an IoT-based smart system that is connected to an iOS mobile application

CartToGo is an IoT-based smart system that is connected to an iOS mobile application, used by supermarket shoppers to reduce their waiting time in the queue lines and that’s done by enabling them to scan each product’s barcode to display its price and total price on the LCD display as well as the iOS mobile application.

Dec 15, 2022

An Event-based system, highly inspired by NodeJS's Event Emitter

An Event-based system, highly inspired by NodeJS's Event Emitter. This implementation uses generic types to allow for multiple data types, while still being intuitive.

Dec 1, 2022

Build a system that recommends jobs based on resume.

Build a system that recommends jobs based on resume.

Job Findr Problem Statement: Build a system that recommends jobs based on resume. Problem Description: The problem statement suggests to build a syste

Jul 8, 2022

Simple and fast Entity-Component-System (ECS) library written in Dart.

Simple and fast Entity-Component-System (ECS) library written in Dart.

Fast ECS Simple and fast Entity-Component-System (ECS) library written in Dart. CPU Flame Chart Demonstration of performance for rotation of 1024 enti

Nov 16, 2022

It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Parabeac-Core Parabeac-Core converts design files into Flutter code driven by open-source & community. Contribute · Discord Community · Designer Proto

Jan 4, 2023

NesPad-design-in-flutter - Create a design in flutter for a NesPad

NesPad-design-in-flutter - Create a design in flutter for a NesPad

NesPad Design in Flutter Diseño de un NesPad usando flutter nativo. Se hizo util

Jan 3, 2022

Excersises-app - Flutter excersises app design with 2 design pages

Excersises-app - Flutter excersises app design with 2 design pages

About The Project Flutter excersises app design with 2 design pages only Design

Jan 2, 2022

Glass-Design - Glass Design on one page writing in Flutter

Glass-Design - Glass Design on one page writing in Flutter

glassdesign writing in Flutter framework / GlassDesign fait en Flutter framework

Jun 15, 2022
Comments
  • CTextField error border color

    CTextField error border color

    Hi @NourEldinShobier - We've been successful in using your Carbon-Flutter package (excellent, Thanks!) in the OpenEEW Provisioner app https://github.com/openeew/openeew-provisioner

    I'm trying to add some error warnings when the user inputs an incorrect value. How can I change the border outline of CTextField ? I tried adding

            border: new OutlineInputBorder(
               borderSide: new BorderSide(color: CColors.red60)
        )),
    
    enhancement 
    opened by johnwalicki 22
  • Some screenshot examples to demonstrate the look and feel in readme

    Some screenshot examples to demonstrate the look and feel in readme

    Hi @NourEldinShobier could you add some example screenshot to your Readme file to demonstrate how this looks, please? Btw, brilliant that you took the time to put this together. Thank you!

    documentation 
    opened by peterpoliwoda 1
  • Publish to flutter registry?

    Publish to flutter registry?

    Hello, it says in the README that this is the start of a Dart package to publish to the flutter registry; what needs to be done in order to make this available there?

    question 
    opened by gdpelican 1
Owner
Nour El-Din Shobier
Software Engineer | Full Stack Developer | Flutter Developer
Nour El-Din Shobier
A Flutter based to do list app (yes, another to do list... but... this time based on a beautiful design)

✔️ Flutter to do App "To Do List" A Flutter app based on the design of the To Do App, created by Rudi Hartono, see more on: Uplabs. Getting Started ??

Johan 561 Dec 31, 2022
Design system flutter - A framework contains SBB (Swiss Federal Railways) UI elements for Flutter Apps

Design System Mobile for Flutter Design System Mobile in Flutter (yes, it could

Swiss Federal Railways (SBB) 14 Dec 22, 2022
Implements Microsoft's Fluent Design System in Flutter.

fluent_ui Design beautiful native windows apps using Flutter Unofficial implementation of Fluent UI for Flutter. It's written based on the official do

Bruno D'Luka 1.8k Dec 29, 2022
A Dart client for the NATS messaging system. Design to use with Dart and Flutter.

Dart-NATS A Dart client for the NATS messaging system. Design to use with Dart and flutter. Flutter Web Support by WebSocket client.connect(Uri.parse(

Chart Chongcharoen 32 Nov 18, 2022
Stacked UI design system built for Flutter.

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Lewis Eccles 0 Jan 2, 2022
Provide powerfull tools to help you build your Flutter design system.

Provide powerfull tools to help you build your design system. About flutter_design contains packages to help you bootstrap your design system with a w

Min Zhao 23 Dec 3, 2022
Flutter implementation of the french government design system.

Flutter DSFR Flutter implementation of the french government design system. The full design specifications is available here: https://gouvfr.atlassian

Floating Dartists 14 Dec 22, 2022
Canton Design System elements and resources for Flutter.

Canton UI Canton UI elements and resources for Flutter. Examples in Apps Notes App News App Elisha Description This includes things such as themes (co

Carlton Aikins 10 Dec 17, 2022
The company's design system

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Adby Santos 2 Nov 23, 2021
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 307 Dec 24, 2022