NGFT Design System

NGFT Design System is a comprehensive Flutter library offering a collection of reusable UI components, themes, and utilities. This library helps in building consistent and scalable applications with pre-built, customizable widgets that match NGFT's brand guidelines.

Table of Contents

  1. Installation
  2. Getting Started
  3. Components Overview
  4. Component Usage
  5. Customization
  6. Example Project
  7. Contributing
  8. License

Installation

To use NGFT Design System in your Flutter project, add it as a dependency in your pubspec.yaml file:

dependencies:
  ngft_ds: ^1.0.2

Replace ^1.0.2 with the latest version available on pub.flutter-io.cn.

Then, run flutter pub get to install the package.

Getting Started

After installing the package, you can start using the NGFT Design System components by importing them into your Dart files:

import 'package:ngft_ds/ngft_ds.dart';

Components Overview

NGFT Design System includes a variety of components to enhance your Flutter applications:

  • Buttons (Primary, Secondary, Destructive)
  • Input Fields (Text, Number, Search, Textarea)
  • Checkboxes
  • Radio Buttons
  • Switches
  • Snackbars
  • Notifications
  • Avatars
  • Bottom Navigation Bar

Component Usage

Buttons

NGFT Design System provides several types of buttons, each with customizable properties:

Primary Button:

NgftPrimaryButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Primary Button'),
);

Secondary Button:

NgftSecondaryButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Secondary Button'),
);

Destructive Button:

NgftDestructiveButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Delete'),
);

Input Fields

Various input fields are available to handle user inputs:

Text Input:

NgftInputText(
  hintText: 'Enter your name',
  onChanged: (value) {
    // Handle text change
  },
);

Number Input:

NgftInputNumber(
  hintText: 'Enter your age',
  onChanged: (value) {
    // Handle number change
  },
);

Search Input:

NgftInputSearch(
  placeholder: 'Search...',
  onChanged: (value) {
    // Handle search input
  },
);

Checkboxes

Use checkboxes to capture boolean input from users:

NgftCheckbox(
  value: isChecked,
  onChanged: (value) {
    // Handle checkbox state change
  },
);

Radio Buttons

Radio buttons allow users to select a single option from a set:

NgftRadioButton(
  groupValue: selectedOption,
  value: option1,
  onChanged: (value) {
    // Handle radio button selection
  },
);

Switches

Switches provide a toggle for settings and preferences:

NgftSwitch(
  value: isSwitchedOn,
  onChanged: (value) {
    // Handle switch toggle
  },
  labelText: 'Enable feature',
);

Snackbars

Snackbars are used for lightweight notifications:

NgftSnackbar().show(
  context,
  Text('This is a snackbar notification!'),
);

Notifications

For more prominent in-app notifications:

NgftNotification.showSnackBar(
  context,
  'You have a new message!',
  icon: Icon(Icons.info),
  timestamp: 'now',
  senderName: 'System',
  action: TextButton(
    onPressed: () {},
    child: Text('Dismiss'),
  ),
);

Avatars

Avatars are useful for displaying user profile images:

NgftAvatar(
  child: Image.network('https://example.com/avatar.jpg'),
  size: NgftAvatarSize.medium,
  badgeNumber: 5,
);

Bottom Navigation Bar

The Bottom Navigation Bar is configurable for navigation purposes:

NgftBottomNavigationBar(
  initialIndex: 0,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
  ],
  onTap: (index) {
    // Handle navigation
  },
);

Customization

All components are designed with customization in mind. You can easily override default styles using the available constants and themes defined in the library:

  • Colors: ngft_colors.dart
  • Text Styles: ngft_text_style.dart
  • Spacing: ngft_spacings.dart
  • Borders and Radius: ngft_radius.dart, ngft_borders.dart

Example Project

An example project is included in the example directory. It demonstrates the usage of various components provided by NGFT Design System. To run the example, navigate to the example directory and run:

cd example
flutter run

Contributing

Contributions are welcome! Please check out the contributing guidelines for more details on how to help with the development of NGFT Design System.

License

NGFT Design System is licensed under the MIT License. See the LICENSE file for more information.

Libraries

ngft_ds