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
   • Buttons
   • Input Fields
   • Checkboxes
   • Radio Buttons
   • Switches
   • Snackbars
   • Notifications
   • Avatars
   • Bottom Navigation Bar
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.