Vain UI

A Flutter UI library inspired from Carbon Design and easily extensible.

⚠️ STILL WORK IN PROGRESS, BUT IT IS ALREADY FUNCTIONAL ⚠️

Table of Contents

1. About the Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Examples
4. Roadmap
5. Contributing
6. Contact
7. Acknowledgments

About The Project

Carbon Design System is a gorgeous design system built mainly for web and with community-driven mobile implementations, but no official or well mantained substitute for Flutter, so I decided to build Vain UI for flutter which has its foundation highly inspired by Carbon, but in the future will slowly derive from its "parent".

Built With

Vain UI is built using:

• 

(back to top)

Getting started

Below you can find the simple steps you need to take to get Vain UI up and running in your amazing Flutter project.

Prerequisites

The only prerequisite is having Flutter up and running, with all its own prerequisites working.

In order to check if you have Flutter installed, and if everything is working properly, you can try running the following command in a terminal window.

flutter doctor

The ideal output should look something like this:

Make sure to have at least one working Android Studio installation with no issues.

If the command is not recognized by your shell but you did install flutter, make sure to add the installation folder to your PATH environment variable.

Installation

1. In order to add Vain UI to your app, you first need to clone the repo in a folder inside of your already existing project, or in the same folder as the root of the project. An example would be cloning it into your_awesome_project/lib/ui, or if you do not want your project to contain cloned external packages, you can have it in the parent folder of your project.

2. After cloning the repo, import the package locally into your project by editing the pubspec.yaml file.

     ...
     dependencies:
     vain_ui:
       path: <INSERT PATH TO VAIN UI>
       #(example1) path: lib/ui/vain_ui
       #(example2) path: ../vain_ui 
     ...

Whenever I update the library, all you need to do is to pull it by using the following command inside a terminal:

git pull

(back to top)

Examples

⚠️ In the future I am planning to implement an examples/ folder at the root of the repo containing more examples of widgets.

Code

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:vain_ui/vain_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(
          left: 32,
          right: 32,
          top: 64,
          bottom: 16,
        ),
        child: Column(children: <Widget>[
          const VTextField(
              label: 'Enter your username', description: '', hint: 'username'),
          VTextField(
              label: 'Enter your password',
              description: '',
              hint: 'password',
              validator: (value) {
                if (value == null || value.length < 8) {
                  return VValidationResult(
                      kind: VValidationKind.error,
                      message: 'Password is not long enough.');
                } else {
                  return VValidationResult(
                      kind: VValidationKind.success,
                      message: 'The password respects all the conditions');
                }
              }),
          const SizedBox(height: 32),
          Row(children: <Widget>[
            VButton(
                label: 'Sign up',
                kind: VButtonKind.secondary,
                size: VButtonSize.md,
                onPressed: () => print('signed up')),
            VButton(
                label: 'Login',
                size: VButtonSize.md,
                onPressed: () => print('logged in'))
          ]),
          const SizedBox(height: 64),
          VButton.icon(
            iconDescription: 'Close app',
            icon: const Icon(Icons.close, color: VColors.white0),
            onPressed: () => SystemNavigator.pop(),
          )
        ]),
      ),
    );
  }
}

Result

(back to top)

Roadmap

• Implement color theme system (currently only the classic Carbon ones: white, gray10, gray90, gray100)
• Implement checkboxes
• Implement toggles
• Implement forms
• Implement dropdowns
• Refactor theme-ing system for ease of use

(back to top)

Contributing

I have to cleanup the code a bit and create a proper documentation first in order to get ready to easily recieve contributions, so for the moment contributions in the form of Pull requests will be taken into consideration but it's very unlikely for anyone to understand the code-base without docs.

(back to top)

Contact

(back to top)

Acknowledgments

I used alot of the information available on https://carbondesignsystem.com/ in order to build most of the widgets.

I used https://github.com/NourEldinShobier/carbon-flutter as the starting point for my library. Some widgets are still very close to NourEldinShobier's implementation but after I finish all of the basic widgets, Vain UI will change alot from carbon-flutter.

At the moment the most important difference between my implementation and NourEldinShobier's implementation is the presence of all of the 4 basic Carbon themes, and in some cases I stick more to Carbon's original guidelines.

(back to top)