ngft_ds

Description:

ngft ds

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 #

Installation
Getting Started
Components Overview
Component Usage

Buttons
Input Fields
Checkboxes
Radio Buttons
Switches
Snackbars
Notifications
Avatars
Bottom Navigation Bar


Customization
Example Project
Contributing
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
copied to clipboard
Replace ^1.0.2 with the latest version available on pub.dev.
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';
copied to clipboard
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'),
);
copied to clipboard
Secondary Button:
NgftSecondaryButton(
onPressed: () {
// Handle button press
},
child: Text('Secondary Button'),
);
copied to clipboard
Destructive Button:
NgftDestructiveButton(
onPressed: () {
// Handle button press
},
child: Text('Delete'),
);
copied to clipboard
Input Fields #
Various input fields are available to handle user inputs:
Text Input:
NgftInputText(
hintText: 'Enter your name',
onChanged: (value) {
// Handle text change
},
);
copied to clipboard
Number Input:
NgftInputNumber(
hintText: 'Enter your age',
onChanged: (value) {
// Handle number change
},
);
copied to clipboard
Search Input:
NgftInputSearch(
placeholder: 'Search...',
onChanged: (value) {
// Handle search input
},
);
copied to clipboard
Checkboxes #
Use checkboxes to capture boolean input from users:
NgftCheckbox(
value: isChecked,
onChanged: (value) {
// Handle checkbox state change
},
);
copied to clipboard
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
},
);
copied to clipboard
Switches #
Switches provide a toggle for settings and preferences:
NgftSwitch(
value: isSwitchedOn,
onChanged: (value) {
// Handle switch toggle
},
labelText: 'Enable feature',
);
copied to clipboard
Snackbars #
Snackbars are used for lightweight notifications:
NgftSnackbar().show(
context,
Text('This is a snackbar notification!'),
);
copied to clipboard
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'),
),
);
copied to clipboard
Avatars #
Avatars are useful for displaying user profile images:
NgftAvatar(
child: Image.network('https://example.com/avatar.jpg'),
size: NgftAvatarSize.medium,
badgeNumber: 5,
);
copied to clipboard
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
},
);
copied to clipboard
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
copied to clipboard
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.