ngft_ds 1.0.9 
ngft_ds: ^1.0.9 copied to clipboard
Published 14 months ago • 
ngft.com
ngft.comNGFT Design System is a Flutter library with reusable UI components for consistent UI across all NGFT applications
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:ngft_ds/ngft_ds.dart';
void main() {
runApp(const NGFTDesignSystemApp());
}
class NGFTDesignSystemApp extends StatelessWidget {
const NGFTDesignSystemApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'NGFT Design System',
routes: {
'/': (context) =>
const NGFTDesignSystemAppHomePage(title: 'NGFT Design System App'),
'/inputs': (context) => const InputTypeSelectionScreen(),
'/input_texts': (context) => const InputTextsScreen(),
'/input_number': (context) => const InputNumberScreen(),
'/input_search': (context) => const InputSearchScreenState(),
'/input_textarea': (context) => const InputTextareaScreen(),
'/buttons': (context) => const ButtonsScreen(),
'/primary_buttons': (context) => const PrimaryButtonsScreen(),
'/secondary_buttons': (context) => const SecondaryButtonsScreen(),
'/destructive_buttons': (context) => const DestructiveButtonsScreen(),
'/snackbar': (context) => const SnackbarScreen(),
'/radio': (context) => const RadioScreen(),
'/checkbox': (context) => const CheckboxScreen(),
'/select': (context) => const SelectScreen(),
'/multi_select': (context) => const MultiSelectScreen(),
'/bottom_navigation_bar': (context) =>
const BottomNavigationBarScreen(),
'/bottom_navigation_bar_2': (context) =>
const BottomNavigationBarScreen2(),
'/avatar': (context) => const AvatarScreen(),
'/notification': (context) => const NotificationScreen(),
'/switch': (context) => const SwitchScreen(),
'/tab': (context) => const TabScreen(),
'/icon': (context) => const IconScreen(),
},
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: NGFTColors.primaryColor[300]!,
),
useMaterial3: true,
),
);
}
}
class NGFTDesignSystemAppHomePage extends StatefulWidget {
const NGFTDesignSystemAppHomePage({super.key, required this.title});
final String title;
@override
State<NGFTDesignSystemAppHomePage> createState() =>
_NGFTDesignSystemAppHomePageState();
}
class _NGFTDesignSystemAppHomePageState
extends State<NGFTDesignSystemAppHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: Text(widget.title),
),
drawer: Drawer(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
),
padding: const EdgeInsets.all(20),
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).padding.top,
),
Text(
'NGFT Design System',
style: TextStyle(
fontSize: 32,
color: Theme.of(context).colorScheme.onPrimary,
),
textAlign: TextAlign.center,
),
],
),
),
ListTile(
title: const Text('Home'),
onTap: () => Navigator.pop(context),
),
ListTile(
title: const Text('Buttons'),
onTap: () => Navigator.popAndPushNamed(context, '/buttons'),
),
ListTile(
title: const Text('Checkbox'),
onTap: () => Navigator.popAndPushNamed(context, '/checkbox'),
),
ListTile(
title: const Text('Inputs'),
onTap: () => Navigator.popAndPushNamed(context, '/inputs'),
),
ListTile(
title: const Text('Radio'),
onTap: () => Navigator.popAndPushNamed(context, '/radio'),
),
ListTile(
title: const Text('Snackbars'),
onTap: () => Navigator.popAndPushNamed(context, '/snackbar'),
),
ListTile(
title: const Text('Select'),
onTap: () => Navigator.popAndPushNamed(context, '/select'),
),
ListTile(
title: const Text('MultiSelect'),
onTap: () =>
Navigator.popAndPushNamed(context, '/multi_select'),
),
ListTile(
title: const Text('Bottom Navigation Bar'),
onTap: () => Navigator.popAndPushNamed(
context, '/bottom_navigation_bar'),
),
ListTile(
title: const Text('Bottom Navigation Bar (More)'),
onTap: () => Navigator.popAndPushNamed(
context, '/bottom_navigation_bar_2'),
),
ListTile(
title: const Text('Avatar'),
onTap: () => Navigator.popAndPushNamed(context, '/avatar'),
),
ListTile(
title: const Text('Notification'),
onTap: () =>
Navigator.popAndPushNamed(context, '/notification'),
),
ListTile(
title: const Text('Switch'),
onTap: () => Navigator.popAndPushNamed(context, '/switch'),
),
ListTile(
title: const Text('Tab'),
onTap: () => Navigator.popAndPushNamed(context, '/tab'),
),
ListTile(
title: const Text('Icons'),
onTap: () => Navigator.popAndPushNamed(context, '/icon'),
)
],
),
),
),
body: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('NGFT Design System'),
// SizedBox(height: 10),
Text('Use the side drawer to navigate to different screens'),
],
),
),
);
}
}
class InputTypeSelectionScreen extends StatefulWidget {
const InputTypeSelectionScreen({super.key});
@override
State<InputTypeSelectionScreen> createState() =>
_InputTypeSelectionScreenState();
}
class _InputTypeSelectionScreenState extends State<InputTypeSelectionScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('Select NGFT Input Type'),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
children: [
ListTile(
title: const Text('Input Text'),
onTap: () => Navigator.pushNamed(context, '/input_texts'),
),
ListTile(
title: const Text('Input Number'),
onTap: () => Navigator.pushNamed(context, '/input_number'),
),
ListTile(
title: const Text('Input Search'),
onTap: () => Navigator.pushNamed(context, '/input_search'),
),
ListTile(
title: const Text('Input Textarea'),
onTap: () => Navigator.pushNamed(context, '/input_textarea'),
),
],
),
),
);
}
}
class InputTextsScreen extends StatefulWidget {
const InputTextsScreen({super.key});
@override
State<InputTextsScreen> createState() => _InputTextsScreenState();
}
class _InputTextsScreenState extends State<InputTextsScreen> {
bool _enabled = true;
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT InputTexts'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
icon: const Icon(Icons.check),
),
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Form(
key: _formKey,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
NgftPhoneInputText(
initialValue: '',
validator: (value) {
if (value!.completeNumber.isEmpty ||
value.number.isEmpty ||
value.completeNumber == '') {
return "Mobile number is required.";
}
if (value.isValidNumber() == false) {
return "Invalid mobile number.";
}
return null;
},
),
const SizedBox(height: 20),
NgftSelectFormField(
hintText: 'Select an item',
enabled: _enabled,
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (value == null) {
return 'Please select an item';
}
return null;
},
items: [
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-0',
enabled: false,
),
NgftSelectItem(
text: 'Select-text-1',
),
NgftSelectItem(
text: 'Select-text-2',
),
NgftSelectDivider(),
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-2.5',
enabled: false,
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectItem(
text: 'Select-text-3',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectItem(
text: 'Select-text-4',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectDivider(),
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-4.5',
enabled: false,
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
NgftSelectItem(
text: 'Select-text-5',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
NgftSelectItem(
text: 'Select-text-6',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
],
),
const SizedBox(height: 20),
const Text('InputText'),
const SizedBox(height: 10),
NgftInputText(
enabled: _enabled,
hintText: 'PlaceHolder',
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
),
const SizedBox(height: 20),
const Text('InputText with trailingIcon'),
const SizedBox(height: 10),
NgftInputText(
enabled: _enabled,
hintText: 'PlaceHolder',
autovalidateMode: AutovalidateMode.onUserInteraction,
trailingIcon: Image.asset(
'assets/icons/enabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
disabledTrailingIcon: Image.asset(
'assets/icons/disabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
errorTrailingIcon: Image.asset(
'assets/icons/error_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
),
const SizedBox(height: 20),
const Text(
'InputText with trailingIcon, label and helperText'),
const SizedBox(height: 10),
NgftInputText(
enabled: _enabled,
hintText: 'PlaceHolder',
autovalidateMode: AutovalidateMode.onUserInteraction,
helperText: 'Helper text',
labelText: 'Label',
trailingIcon: Image.asset(
'assets/icons/enabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
disabledTrailingIcon: Image.asset(
'assets/icons/disabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
errorTrailingIcon: Image.asset(
'assets/icons/error_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
),
const SizedBox(height: 20),
const Text('Invisible InputText'),
const SizedBox(height: 10),
NgftInputText.inviscible(
enabled: _enabled,
hintText: 'PlaceHolder',
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
),
const SizedBox(height: 20),
const Text('Invisible InputText with trailingIcon'),
const SizedBox(height: 10),
NgftInputText.inviscible(
enabled: _enabled,
hintText: 'PlaceHolder',
autovalidateMode: AutovalidateMode.onUserInteraction,
trailingIcon: Image.asset(
'assets/icons/enabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
disabledTrailingIcon: Image.asset(
'assets/icons/disabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
errorTrailingIcon: Image.asset(
'assets/icons/error_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
),
const SizedBox(height: 20),
const Text(
'Invisible InputText with trailingIcon, label and helperText',
),
const SizedBox(height: 10),
NgftInputText.inviscible(
enabled: _enabled,
hintText: 'PlaceHolder',
autovalidateMode: AutovalidateMode.onUserInteraction,
helperText: 'Helper text',
labelText: 'Label',
trailingIcon: Image.asset(
'assets/icons/enabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
disabledTrailingIcon: Image.asset(
'assets/icons/disabled_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
errorTrailingIcon: Image.asset(
'assets/icons/error_input_text_icon.png',
height: 20,
width: 20,
scale: 3,
),
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
)
],
),
),
),
),
),
);
}
}
class ButtonsScreen extends StatefulWidget {
const ButtonsScreen({super.key});
@override
State<ButtonsScreen> createState() => _ButtonsScreenState();
}
class _ButtonsScreenState extends State<ButtonsScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Buttons'),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
children: <Widget>[
ListTile(
onTap: () {
Navigator.pushNamed(context, '/primary_buttons');
},
title: const Text('Primary Buttons'),
),
ListTile(
onTap: () {
Navigator.pushNamed(context, '/secondary_buttons');
},
title: const Text('Secondary Buttons'),
),
ListTile(
onTap: () {
Navigator.pushNamed(context, '/destructive_buttons');
},
title: const Text('Destructive Buttons'),
),
],
),
),
);
}
}
class InputNumberScreen extends StatefulWidget {
const InputNumberScreen({super.key});
@override
State<InputNumberScreen> createState() => _InputNumberScreenState();
}
class _InputNumberScreenState extends State<InputNumberScreen> {
bool _enabled = true;
final _formKey = GlobalKey<FormState>();
final TextEditingController _inputNumberController = TextEditingController();
final TextEditingController _inputNumberWithHintTextController =
TextEditingController();
final TextEditingController _inputNumberWithHintTextPrefixSuffixController =
TextEditingController();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT InputNumber'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
icon: const Icon(Icons.check),
),
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Column(
children: [
Form(
key: _formKey,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('InputNumber'),
const SizedBox(height: 10),
NGFTInputNumber(
enabled: _enabled,
controller: _inputNumberController,
validator: (value) {
if (value == null || value == '') {
return 'Please enter a number';
}
return null;
},
),
const SizedBox(height: 20),
const Text('InputNumber with hintText'),
const SizedBox(height: 10),
NGFTInputNumber(
enabled: _enabled,
hintText: 'number',
controller: _inputNumberWithHintTextController,
validator: (value) {
if (value == null || value == '') {
return 'Please enter a number';
}
return null;
},
),
const SizedBox(height: 20),
const Text(
'InputNumber with hintText, prefix and suffix'),
const SizedBox(height: 10),
NGFTInputNumber(
enabled: _enabled,
hintText: 'number',
controller:
_inputNumberWithHintTextPrefixSuffixController,
prefix: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'€',
style: NgftTextStyle.regularBase.copyWith(
color: NGFTColors.typographyColor[400],
),
),
],
),
suffix: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'EUR',
style: NgftTextStyle.regularBase.copyWith(
color: NGFTColors.typographyColor[400],
),
),
],
),
validator: (value) {
if (value == null || value == '') {
return 'Please enter a number';
}
return null;
},
),
],
)),
),
),
],
),
),
);
}
}
class InputSearchScreenState extends StatefulWidget {
const InputSearchScreenState({super.key});
@override
State<InputSearchScreenState> createState() => _InputSearchScreenStateState();
}
class _InputSearchScreenStateState extends State<InputSearchScreenState> {
final _formKey = GlobalKey<FormState>();
final TextEditingController _searchController = TextEditingController();
final TextEditingController _invisibleSearchController =
TextEditingController();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT InputSearch'),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('InputSearch'),
const SizedBox(height: 10),
NgftInputSearch(
controller: _searchController,
onChanged: (value) {},
onSubmitted: (value) {},
),
const SizedBox(height: 20),
const Text('Invisible InputSearch'),
const SizedBox(height: 10),
NgftInputSearch.invisible(
controller: _invisibleSearchController,
onChanged: (value) {},
onSubmitted: (value) {},
),
],
),
),
),
),
);
}
}
class InputTextareaScreen extends StatefulWidget {
const InputTextareaScreen({super.key});
@override
State<InputTextareaScreen> createState() => _InputTextareaScreenState();
}
class _InputTextareaScreenState extends State<InputTextareaScreen> {
final _formkey = GlobalKey<FormState>();
bool _enabled = true;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT InputTextarea'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
if (_formkey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
icon: const Icon(Icons.check),
),
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Form(
key: _formkey,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('InputTextarea'),
const SizedBox(height: 10),
NgftInputTextarea(
enabled: _enabled,
// hintText: 'PlaceHold
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
),
const SizedBox(height: 20),
const Text(
'Invisible InputTextarea with label, helpertext and placeholder'),
const SizedBox(height: 10),
NgftInputTextarea(
enabled: _enabled,
placeholder: 'PlaceHolder',
helperText: 'Helper text',
labelText: 'Label',
validator: (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
},
),
const SizedBox(height: 20),
],
),
),
),
),
);
}
}
class PrimaryButtonsScreen extends StatefulWidget {
const PrimaryButtonsScreen({super.key});
@override
State<PrimaryButtonsScreen> createState() => _PrimaryButtonsScreenState();
}
class _PrimaryButtonsScreenState extends State<PrimaryButtonsScreen>
with TickerProviderStateMixin {
late TabController _tabController;
bool _enabled = true;
@override
void initState() {
super.initState();
_tabController = TabController(
length: 3,
vsync: this,
);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Primary Buttons'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Column(
children: [
Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: TabBar(
controller: _tabController,
tabs: const <Widget>[
Tab(
text: 'Filled',
),
Tab(
text: 'Outline',
),
Tab(
text: 'Ghost',
),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftPrimaryIconButton(
enabled: _enabled,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.small,
child: const Text('Button'),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.small,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Buttons'),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.small,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
child: const Text('Button'),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
onPressed: () {},
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftPrimaryIconButton(
enabled: _enabled,
type: NgftButtonType.outline,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
type: NgftButtonType.outline,
size: NgftButtonSize.small,
child: const Text('Button'),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Buttons'),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
type: NgftButtonType.outline,
child: const Text('Button'),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
onPressed: () {},
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftPrimaryIconButton(
enabled: _enabled,
type: NgftButtonType.ghost,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
type: NgftButtonType.ghost,
size: NgftButtonSize.small,
child: const Text('Button'),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Buttons'),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
type: NgftButtonType.ghost,
child: const Text('Button'),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
onPressed: () {},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
enabled: _enabled,
size: NgftButtonSize.medium,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
onPressed: () {},
),
),
],
),
),
],
),
),
],
),
);
}
}
class SecondaryButtonsScreen extends StatefulWidget {
const SecondaryButtonsScreen({super.key});
@override
State<SecondaryButtonsScreen> createState() => _SecondaryButtonsScreenState();
}
class _SecondaryButtonsScreenState extends State<SecondaryButtonsScreen>
with TickerProviderStateMixin {
late TabController _tabController;
bool _enabled = true;
@override
void initState() {
super.initState();
_tabController = TabController(
length: 3,
vsync: this,
);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Secondary Buttons'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Column(
children: [
Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: TabBar(
controller: _tabController,
tabs: const <Widget>[
Tab(
text: 'Filled',
),
Tab(
text: 'Outline',
),
Tab(
text: 'Ghost',
),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftSecondaryIconButton(
enabled: _enabled,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.filled,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.filled,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.filled,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.filled,
size: NgftButtonSize.medium,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.filled,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.filled,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftSecondaryIconButton(
enabled: _enabled,
type: NgftButtonType.outline,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.outline,
size: NgftButtonSize.medium,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.outline,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.outline,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftSecondaryIconButton(
enabled: _enabled,
type: NgftButtonType.ghost,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.ghost,
size: NgftButtonSize.medium,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.ghost,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftSecondaryButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.ghost,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
],
),
),
],
),
),
],
),
);
}
}
class DestructiveButtonsScreen extends StatefulWidget {
const DestructiveButtonsScreen({super.key});
@override
State<DestructiveButtonsScreen> createState() =>
_DestructiveButtonsScreenState();
}
class _DestructiveButtonsScreenState extends State<DestructiveButtonsScreen>
with TickerProviderStateMixin {
late TabController _tabController;
bool _enabled = true;
@override
void initState() {
super.initState();
_tabController = TabController(
length: 3,
vsync: this,
);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Destructive Buttons'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Column(
children: [
Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: TabBar(
controller: _tabController,
tabs: const <Widget>[
Tab(
text: 'Filled',
),
Tab(
text: 'Outline',
),
Tab(
text: 'Ghost',
),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftDestructiveIconButton(
enabled: _enabled,
type: NgftButtonType.filled,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.filled,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.filled,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.filled,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.filled,
size: NgftButtonSize.medium,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.filled,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.filled,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftDestructiveIconButton(
enabled: _enabled,
type: NgftButtonType.outline,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.outline,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.outline,
size: NgftButtonSize.medium,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.outline,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.outline,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
const Text('Xs'),
const SizedBox(height: 5),
NgftDestructiveIconButton(
enabled: _enabled,
type: NgftButtonType.ghost,
child: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
const SizedBox(height: 20),
const Text('Small'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
size: NgftButtonSize.small,
type: NgftButtonType.ghost,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
const SizedBox(height: 20),
const Text('Medium'),
const SizedBox(height: 5),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.ghost,
size: NgftButtonSize.medium,
child: const Text('Button'),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.ghost,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
],
),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftDestructiveButton(
enabled: _enabled,
onPressed: () {},
type: NgftButtonType.ghost,
size: NgftButtonSize.medium,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
const SizedBox(width: 10),
const Text('Button'),
const SizedBox(width: 10),
Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
],
),
),
),
],
),
),
],
),
),
],
),
);
}
}
class SnackbarScreen extends StatefulWidget {
const SnackbarScreen({super.key});
@override
State<SnackbarScreen> createState() => _SnackbarScreenState();
}
class _SnackbarScreenState extends State<SnackbarScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Snackbars'),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
child: const Text('Show snackbar with message'),
onPressed: () {
NgftSnackbar().show(
context,
const Text('Snackbar-Text'),
);
},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
child:
const Text('Show snackbar with leading icon and message'),
onPressed: () {
NgftSnackbar().show(
context,
Row(
children: [
CircleAvatar(
backgroundColor: Colors.green[600],
child: const Icon(
Icons.check,
color: Colors.white,
),
),
const SizedBox(width: 10),
const Text('Snackbar-Text'),
],
),
);
},
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
child: const Text(
'Show snackbar with leading icon, message and action',
textAlign: TextAlign.center,
),
onPressed: () {
NgftSnackbar().show(
context,
Row(
children: [
CircleAvatar(
backgroundColor: Colors.green[600],
child: const Icon(
Icons.check,
color: Colors.white,
),
),
const SizedBox(width: 10),
const Text('Snackbar-Text'),
],
),
actionLabel: 'ACCEPT',
onPressedAction: () {},
);
},
),
),
],
),
),
);
}
}
class RadioScreen extends StatefulWidget {
const RadioScreen({super.key});
@override
State<RadioScreen> createState() => _RadioScreenState();
}
class _RadioScreenState extends State<RadioScreen> {
String? _radioValue;
bool _enabled = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Radio Buttons'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
const SizedBox(height: 20),
Row(
children: [
NgftRadioButton(
enabled: _enabled,
value: 'Item1',
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = value;
});
},
),
const Text('Item 1')
],
),
const SizedBox(height: 5),
Row(
children: [
NgftRadioButton(
enabled: _enabled,
value: 'Item2',
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = value;
});
},
),
const Text('Item 2')
],
),
const SizedBox(height: 5),
Row(
children: [
NgftRadioButton(
enabled: _enabled,
value: 'Item3',
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = value;
});
},
),
const Text('Item 3')
],
),
const SizedBox(height: 5),
Row(
children: [
NgftRadioButton(
enabled: _enabled,
value: 'Item4',
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = value;
});
},
),
const Text('Item 4')
],
),
],
),
),
);
}
}
class CheckboxScreen extends StatefulWidget {
const CheckboxScreen({super.key});
@override
State<CheckboxScreen> createState() => _CheckboxScreenState();
}
class _CheckboxScreenState extends State<CheckboxScreen> {
bool checkbox1 = true;
bool checkbox2 = true;
bool checkbox3 = true;
bool checkbox4 = true;
bool _enabled = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Checkboxes'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
const SizedBox(height: 20),
Row(
children: [
NgftCheckbox(
enabled: _enabled,
value: checkbox1,
onChanged: (value) {
setState(() {
checkbox1 = value;
});
},
),
const Text('Item 1')
],
),
const SizedBox(height: 5),
Row(
children: [
NgftCheckbox(
enabled: _enabled,
value: checkbox2,
onChanged: (value) {
setState(() {
checkbox2 = value;
});
},
),
const Text('Item 2')
],
),
const SizedBox(height: 5),
Row(
children: [
NgftCheckbox(
enabled: _enabled,
value: checkbox3,
onChanged: (value) {
setState(() {
checkbox3 = value;
});
},
),
const Text('Item 3')
],
),
const SizedBox(height: 5),
Row(
children: [
NgftCheckbox(
enabled: _enabled,
value: checkbox4,
onChanged: (value) {
setState(() {
checkbox4 = value;
});
},
),
const Text('Item 4')
],
),
],
),
),
);
}
}
class SelectScreen extends StatefulWidget {
const SelectScreen({super.key});
@override
State<SelectScreen> createState() => _SelectScreenState();
}
class _SelectScreenState extends State<SelectScreen> {
bool _enabled = true;
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Select'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
icon: const Icon(Icons.check),
),
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 20,
),
child: Form(
key: _formKey,
child: Column(
children: [
NgftSelectFormField(
hintText: 'Select an item',
enabled: _enabled,
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (value == null) {
return 'Please select an item';
}
return null;
},
items: [
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-0',
enabled: false,
),
NgftSelectItem(
text: 'Select-text-1',
),
NgftSelectItem(
text: 'Select-text-2',
),
NgftSelectDivider(),
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-2.5',
enabled: false,
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectItem(
text: 'Select-text-3',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectItem(
text: 'Select-text-4',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectDivider(),
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-4.5',
enabled: false,
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
NgftSelectItem(
text: 'Select-text-5',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
NgftSelectItem(
text: 'Select-text-6',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
],
),
],
),
),
),
);
}
}
class MultiSelectScreen extends StatefulWidget {
const MultiSelectScreen({super.key});
@override
State<MultiSelectScreen> createState() => _MultiSelectScreenState();
}
class _MultiSelectScreenState extends State<MultiSelectScreen> {
bool _enabled = true;
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT MultiSelect'),
actions: [
IconButton(
iconSize: 26,
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
icon: const Icon(Icons.check),
),
IconButton(
iconSize: 26,
onPressed: () {
setState(() {
_enabled = !_enabled;
});
},
icon: Text(
_enabled ? 'Disable' : 'Enable',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
],
),
body: Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Form(
key: _formKey,
child: Column(
children: [
NfgtMultiSelectFormField(
enabled: _enabled,
autovalidateMode: AutovalidateMode.onUserInteraction,
hintText: 'Select multiple items',
validator: (value) {
if (value == null) {
return 'Please select an item';
}
return null;
},
items: [
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-0',
enabled: false,
),
NgftSelectItem(
text: 'Select-text-1',
),
NgftSelectItem(
text: 'Select-text-2',
),
NgftSelectDivider(),
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-2.5',
enabled: false,
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectItem(
text: 'Select-text-3',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectItem(
text: 'Select-text-4',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
),
NgftSelectDivider(),
NgftSelectLabel(labelText: 'Label'),
NgftSelectItem(
text: 'Select-text-4.5',
enabled: false,
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
NgftSelectItem(
text: 'Select-text-5',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
NgftSelectItem(
text: 'Select-text-6',
icon: Transform.rotate(
angle: 0.90,
child: const Icon(Icons.airplanemode_active),
),
badgeText: 'badge-text',
),
],
),
],
),
),
),
);
}
}
class BottomNavigationBarScreen extends StatefulWidget {
const BottomNavigationBarScreen({super.key});
@override
State<BottomNavigationBarScreen> createState() =>
_BottomNavigationBarScreenState();
}
class _BottomNavigationBarScreenState extends State<BottomNavigationBarScreen> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Bottom Navigation Bar'),
),
body: Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
),
bottomNavigationBar: NgftBottomNavigationBar(
initialIndex: _selectedIndex,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: 'Notifications',
),
// BottomNavigationBarItem(
// icon: Icon(Icons.person),
// label: 'Profile',
// ),
],
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
),
);
}
}
class BottomNavigationBarScreen2 extends StatefulWidget {
const BottomNavigationBarScreen2({super.key});
@override
State<BottomNavigationBarScreen2> createState() =>
_BottomNavigationBarScreen2State();
}
class _BottomNavigationBarScreen2State
extends State<BottomNavigationBarScreen2> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Bottom Navigation Bar'),
),
body: Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
),
bottomNavigationBar: NgftBottomNavigationBar(
initialIndex: 0,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: 'Notifications',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
BottomNavigationBarItem(
icon: Icon(Icons.access_time),
label: 'Release time',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_home_work_sharp),
label: 'Add place',
),
BottomNavigationBarItem(
icon: Icon(Icons.blur_on_sharp),
label: 'Blurry way',
),
BottomNavigationBarItem(
icon: Icon(Icons.highlight_alt),
label: 'Nighlishts',
),
BottomNavigationBarItem(
icon: Icon(Icons.payment_rounded),
label: 'Payment',
),
// BottomNavigationBarItem(
// icon: Icon(Icons.home),
// label: 'Home',
// ),
// BottomNavigationBarItem(
// icon: Icon(Icons.search),
// label: 'Search',
// ),
// BottomNavigationBarItem(
// icon: Icon(Icons.notifications),
// label: 'Notifications',
// ),
// BottomNavigationBarItem(
// icon: Icon(Icons.person),
// label: 'Profile',
// ),
],
onTap: (index) {},
),
);
}
}
class NotificationScreen extends StatefulWidget {
const NotificationScreen({super.key});
@override
State<NotificationScreen> createState() => _NotificationScreenState();
}
class _NotificationScreenState extends State<NotificationScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Notification'),
),
body: Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: double.infinity,
child: NgftPrimaryButton(
child: const Text('Show notification'),
onPressed: () {
NgftNotification.showSnackBar(
context,
'Heli 1 departs now. Crew currently grooming the area. Ready to depart in 30 minutes.',
icon: const Icon(
Icons.chat,
color: Colors.grey,
),
timestamp: 'now',
senderName: 'Jubril',
action: TextButton(
onPressed: () {},
child: const Text('ACTION'),
),
);
}),
)
],
),
),
),
);
}
}
class SwitchScreen extends StatefulWidget {
const SwitchScreen({super.key});
@override
State<SwitchScreen> createState() => _SwitchScreenState();
}
class _SwitchScreenState extends State<SwitchScreen> {
bool _value = true;
bool _value2 = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Switch'),
),
body: Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
children: [
NgftSwitch(
// enable: false,
value: _value,
onChanged: (value) {
setState(() {
_value = value;
});
},
labelText: 'Label text',
),
NgftSwitch(
// enable: false,
value: _value2,
onChanged: (value) {
setState(() {
_value2 = value;
});
},
labelText: 'Label text',
),
NgftSwitch(
enable: false,
value: false,
onChanged: (value) {},
labelText: 'Label text',
),
NgftSwitch(
enable: false,
value: true,
onChanged: (value) {},
labelText: 'Label text',
),
],
),
),
);
}
}
class AvatarScreen extends StatefulWidget {
const AvatarScreen({super.key});
@override
State<AvatarScreen> createState() => _AvatarScreenState();
}
class _AvatarScreenState extends State<AvatarScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Avatar'),
),
body: Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
child: Column(
children: [
NgftAvatar(
size: NgftAvatarSize.large,
badgeNumber: 9,
child: Image.network(
'https://s3-alpha-sig.figma.com/img/5c65/8342/bf70053781dc917fbfded07d31c00b73?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MdXaMOEowMYqguPJ6YqmuK8rMd5ML6G3awtCrGTe-sd6FBeeUS6gQ~9E5XkxJ2W2TqX1U3eGNjBHVqRZU6VGIkLX88VZPlTrjgL8aR9iNVAUvjlX-K37YNZ3zCprDdtSu3dOmAKEbYdrJt5U2ouqQL8jaktj10Vq-kA-D7rAwGT4y7hRHww2DbujbEtwclw~8ZojBbfOFo~Tt~LdtWWYxGbYsGWpYY6ZFbAtvXyupmVKK73KE1Ijl8SZfN2n7C8R-qkg9ZCOipRSGrD62gsWSFR725FyscBDnQ-d2aVwPY2eUOOibxOC1GnClQf4EWhrXZin3sw-prCO9UlEWkaZgQ__',
),
),
const SizedBox(height: 30),
NgftAvatar(
size: NgftAvatarSize.medium,
badgeNumber: 20,
child: Image.network(
'https://s3-alpha-sig.figma.com/img/5c65/8342/bf70053781dc917fbfded07d31c00b73?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MdXaMOEowMYqguPJ6YqmuK8rMd5ML6G3awtCrGTe-sd6FBeeUS6gQ~9E5XkxJ2W2TqX1U3eGNjBHVqRZU6VGIkLX88VZPlTrjgL8aR9iNVAUvjlX-K37YNZ3zCprDdtSu3dOmAKEbYdrJt5U2ouqQL8jaktj10Vq-kA-D7rAwGT4y7hRHww2DbujbEtwclw~8ZojBbfOFo~Tt~LdtWWYxGbYsGWpYY6ZFbAtvXyupmVKK73KE1Ijl8SZfN2n7C8R-qkg9ZCOipRSGrD62gsWSFR725FyscBDnQ-d2aVwPY2eUOOibxOC1GnClQf4EWhrXZin3sw-prCO9UlEWkaZgQ__',
),
),
const SizedBox(height: 30),
NgftAvatar(
size: NgftAvatarSize.small,
badgeNumber: 999,
child: Image.network(
'https://s3-alpha-sig.figma.com/img/5c65/8342/bf70053781dc917fbfded07d31c00b73?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MdXaMOEowMYqguPJ6YqmuK8rMd5ML6G3awtCrGTe-sd6FBeeUS6gQ~9E5XkxJ2W2TqX1U3eGNjBHVqRZU6VGIkLX88VZPlTrjgL8aR9iNVAUvjlX-K37YNZ3zCprDdtSu3dOmAKEbYdrJt5U2ouqQL8jaktj10Vq-kA-D7rAwGT4y7hRHww2DbujbEtwclw~8ZojBbfOFo~Tt~LdtWWYxGbYsGWpYY6ZFbAtvXyupmVKK73KE1Ijl8SZfN2n7C8R-qkg9ZCOipRSGrD62gsWSFR725FyscBDnQ-d2aVwPY2eUOOibxOC1GnClQf4EWhrXZin3sw-prCO9UlEWkaZgQ__',
),
),
const SizedBox(height: 30),
NgftAvatar(
badgeNumber: 999,
child: Image.network(
'https://s3-alpha-sig.figma.com/img/5c65/8342/bf70053781dc917fbfded07d31c00b73?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MdXaMOEowMYqguPJ6YqmuK8rMd5ML6G3awtCrGTe-sd6FBeeUS6gQ~9E5XkxJ2W2TqX1U3eGNjBHVqRZU6VGIkLX88VZPlTrjgL8aR9iNVAUvjlX-K37YNZ3zCprDdtSu3dOmAKEbYdrJt5U2ouqQL8jaktj10Vq-kA-D7rAwGT4y7hRHww2DbujbEtwclw~8ZojBbfOFo~Tt~LdtWWYxGbYsGWpYY6ZFbAtvXyupmVKK73KE1Ijl8SZfN2n7C8R-qkg9ZCOipRSGrD62gsWSFR725FyscBDnQ-d2aVwPY2eUOOibxOC1GnClQf4EWhrXZin3sw-prCO9UlEWkaZgQ__',
),
),
const SizedBox(height: 30),
NgftAvatar(
size: NgftAvatarSize.large,
badgeNumber: 999,
child: Image.network(
'https://s3-alpha-sig.figma.com/img/5c65/8342/bf70053781dc917fbfded07d31c00b73?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MdXaMOEowMYqguPJ6YqmuK8rMd5ML6G3awtCrGTe-sd6FBeeUS6gQ~9E5XkxJ2W2TqX1U3eGNjBHVqRZU6VGIkLX88VZPlTrjgL8aR9iNVAUvjlX-K37YNZ3zCprDdtSu3dOmAKEbYdrJt5U2ouqQL8jaktj10Vq-kA-D7rAwGT4y7hRHww2DbujbEtwclw~8ZojBbfOFo~Tt~LdtWWYxGbYsGWpYY6ZFbAtvXyupmVKK73KE1Ijl8SZfN2n7C8R-qkg9ZCOipRSGrD62gsWSFR725FyscBDnQ-d2aVwPY2eUOOibxOC1GnClQf4EWhrXZin3sw-prCO9UlEWkaZgQ__',
),
),
const SizedBox(height: 30),
],
),
),
);
}
}
class TabScreen extends StatefulWidget {
const TabScreen({super.key});
@override
State<TabScreen> createState() => _TabScreenState();
}
class _TabScreenState extends State<TabScreen> with TickerProviderStateMixin {
// create a tab controller
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(length: 6, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Tabs'),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 20,
),
const Text('NgftTab with Arrow'),
const SizedBox(
height: 10,
),
NgftTab(
controller: tabController,
isScrollable: true,
withArrow: true,
tabs: const [
Tab(
text: 'Tab 1',
),
Tab(
text: 'Tab 2',
),
Tab(
text: 'Tab 3',
),
Tab(
text: 'Tab 1',
),
Tab(
text: 'Tab 2',
),
Tab(
text: 'Tab 3',
),
],
),
const SizedBox(
height: 20,
),
const Text('NgftTab without Arrow'),
const SizedBox(
height: 10,
),
NgftTab(
controller: TabController(length: 6, vsync: this),
isScrollable: true,
// onTap: (index) {
// if (true) {
// setState(() {
// // tabController.index = tabController.previousIndex;
// tabController.index = tabController.index;
// });
// }
// },
// withArrow: true,
tabs: const [
Tab(
text: 'Tab 1',
),
Tab(
text: 'Tab 2',
),
Tab(
text: 'Tab 3',
),
Tab(
text: 'Tab 1',
),
Tab(
text: 'Tab 2',
),
Tab(
text: 'Tab 3',
),
],
),
],
),
),
);
}
}
class IconScreen extends StatefulWidget {
const IconScreen({super.key});
@override
State<IconScreen> createState() => _IconScreenState();
}
class _IconScreenState extends State<IconScreen> {
@override
Widget build(BuildContext context) {
final color = NGFTColors.iconographyColor[700];
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
title: const Text('NGFT Icons'),
),
body: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.all(NgftRadius.lg),
),
child: Wrap(
spacing: 30,
runSpacing: 30,
children: [
NgftIcon(
iconPath: NgftIcons.flightsMode,
color: color,
size: 24,
),
Icon(
Icons.close,
color: color,
size: 24,
),
Icon(
Icons.add,
color: color,
size: 24,
),
Icon(
Icons.remove,
color: color,
size: 24,
),
Icon(
Icons.arrow_back,
color: color,
size: 24,
),
Icon(
Icons.arrow_forward,
color: color,
size: 24,
),
Icon(
Icons.arrow_downward,
color: color,
size: 24,
),
Icon(
Icons.arrow_upward,
color: color,
size: 24,
),
Icon(
Icons.file_download_outlined,
color: color,
size: 24,
),
Icon(
Icons.logout,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.chevronLeft,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.chevronRight,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.chevronDown,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.chevronUp,
color: color,
size: 24,
),
Icon(
Icons.swap_vert,
color: color,
size: 24,
),
Icon(
Icons.check,
color: color,
size: 24,
),
Icon(
Icons.arrow_drop_down,
color: color,
size: 24,
),
Icon(
Icons.arrow_drop_up,
color: color,
size: 24,
),
Icon(
Icons.person,
color: color,
size: 24,
),
Icon(
Icons.groups,
color: color,
size: 24,
),
Icon(
Icons.settings,
color: color,
size: 24,
),
Icon(
Icons.warning,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.exclamation,
color: color,
size: 24,
),
Icon(
Icons.error,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.openElsewhere,
color: color,
size: 24,
),
Icon(
Icons.search,
color: color,
size: 24,
),
Icon(
Icons.messenger_outline,
color: color,
size: 24,
),
Icon(
Icons.chat_bubble,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.hat,
color: color,
size: 24,
),
Icon(
Icons.folder,
color: color,
size: 24,
),
Icon(
Icons.domain,
color: color,
size: 24,
),
Icon(
Icons.filter_alt,
color: color,
size: 24,
),
Icon(
Icons.calendar_month,
color: color,
size: 24,
),
Icon(
Icons.calendar_today,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.removeFromCalendar,
color: color,
size: 24,
),
Icon(
Icons.dns,
color: color,
size: 24,
),
Icon(
Icons.location_on,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.distance,
color: color,
size: 24,
),
Icon(
Icons.more_vert,
color: color,
size: 24,
),
Icon(
Icons.drag_handle,
color: color,
size: 24,
),
Icon(
Icons.assignment,
color: color,
size: 24,
),
Icon(
Icons.map_outlined,
color: color,
size: 24,
),
Icon(
Icons.receipt_long_outlined,
color: color,
size: 24,
),
Icon(
Icons.format_list_numbered,
color: color,
size: 24,
),
Icon(
Icons.lock,
color: color,
size: 24,
),
Icon(
Icons.access_time,
color: color,
size: 24,
),
Icon(
Icons.hourglass_empty,
color: color,
size: 24,
),
Icon(
Icons.wb_sunny_outlined,
color: color,
size: 24,
),
Icon(
Icons.dark_mode_outlined,
color: color,
size: 24,
),
Icon(
Icons.view_week_outlined,
color: color,
size: 24,
),
Icon(
Icons.visibility_off,
color: color,
size: 24,
),
Icon(
Icons.restart_alt,
color: color,
size: 24,
),
Icon(
Icons.refresh,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.attachement,
color: color,
size: 24,
),
Icon(
Icons.edit,
color: color,
size: 24,
),
Icon(
Icons.draw,
color: color,
size: 24,
),
Icon(
Icons.layers_outlined,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.elevation,
color: color,
size: 24,
),
Icon(
Icons.home_repair_service,
color: color,
size: 24,
),
Icon(
Icons.file_upload_outlined,
color: color,
size: 24,
),
Icon(
Icons.filter,
color: color,
size: 24,
),
Icon(
Icons.picture_as_pdf,
color: color,
size: 24,
),
Icon(
Icons.description,
color: color,
size: 24,
),
Icon(
Icons.edit_document,
color: color,
size: 24,
),
Icon(
Icons.assignment,
color: color,
size: 24,
),
Icon(
Icons.request_quote,
color: color,
size: 24,
),
Icon(
Icons.content_copy,
color: color,
size: 24,
),
Icon(
Icons.find_in_page,
color: color,
size: 24,
),
Icon(
Icons.delete,
color: color,
size: 24,
),
Icon(
Icons.add_location_alt,
color: color,
size: 24,
),
Icon(
Icons.flight_land,
color: color,
size: 24,
),
Icon(
Icons.flight_takeoff,
color: color,
size: 24,
),
Icon(
Icons.polyline,
color: color,
size: 24,
),
Icon(
Icons.keyboard_tab,
color: color,
size: 24,
),
Icon(
Icons.content_cut,
color: color,
size: 24,
),
Icon(
Icons.content_paste_go,
color: color,
size: 24,
),
Icon(
Icons.call_outlined,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.helicopterLanding,
color: color,
size: 24,
),
],
),
),
Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.all(NgftRadius.lg),
),
child: Wrap(
spacing: 30,
runSpacing: 30,
children: [
NgftIcon(
iconPath: NgftIcons.helicopter,
color: color,
size: 24,
),
Icon(
Icons.local_shipping,
color: color,
size: 24,
),
Icon(
Icons.fire_truck,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.autoTowing,
color: color,
size: 24,
),
Icon(
Icons.front_loader,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.jcb,
color: color,
size: 24,
),
Icon(
Icons.airport_shuttle,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.deliveryVan,
color: color,
size: 24,
),
Icon(
Icons.directions_car,
color: color,
size: 24,
),
Icon(
Icons.cable,
color: color,
size: 24,
),
Icon(
Icons.phishing,
color: color,
size: 24,
),
Icon(
Icons.rv_hookup,
color: color,
size: 24,
),
Icon(
Icons.local_gas_station,
color: color,
size: 24,
),
Icon(
Icons.forest,
color: color,
size: 24,
),
Icon(
Icons.build,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.bigtopUpdates,
color: color,
size: 24,
),
Icon(
Icons.plumbing,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.climber,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.helicopterCrossed,
color: color,
size: 24,
),
],
),
),
Container(
width: double.infinity,
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(),
borderRadius: const BorderRadius.all(NgftRadius.lg),
),
child: Wrap(
spacing: 30,
runSpacing: 30,
children: [
NgftIcon(
iconPath: NgftIcons.roleDispatcher,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.rolePilot,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.roleWorker,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.rolePerson,
color: color,
size: 24,
),
NgftIcon(
iconPath: NgftIcons.roleGear,
color: color,
size: 24,
),
],
),
),
],
),
),
);
}
}Metadata
1
likes
130
points
9
downloads
Publisher
Weekly Downloads
Metadata
NGFT Design System is a Flutter library with reusable UI components for consistent UI across all NGFT applications
Documentation
License
MIT (license)
Dependencies
flutter, flutter_svg, intl_phone_field
