ngft_ds 1.0.0 
ngft_ds: ^1.0.0 copied to clipboard
ngft.comNGFT Design System is a Flutter library that provides a comprehensive set of reusable UI components, themes, and utilities. It enables developers to build consistent and scalable applications with cus [...]
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter/widgets.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) => AvatarScreen(),
'/notification': (context) => const NotificationScreen(),
'/switch': (context) => const SwitchScreen(),
},
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: NGFTColors.primaryColor[300]!,
// seedColor: Colors.red,
),
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> {
int _selectedIndex = 0;
@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'),
)
],
),
),
),
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()) {
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>[
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>();
TextEditingController _inputNumberController = TextEditingController();
TextEditingController _inputNumberWithHintTextController =
TextEditingController();
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>();
TextEditingController _searchController = TextEditingController();
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: Container(
// margin: const EdgeInsets.symmetric(horizontal: 16),
// decoration: BoxDecoration(border: Border.all()),
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: Container(
// margin: const EdgeInsets.symmetric(horizontal: 16),
// decoration: BoxDecoration(border: Border.all()),
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: Container(
// margin: const EdgeInsets.symmetric(horizontal: 16),
// decoration: BoxDecoration(border: Border.all()),
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: [
SizedBox(height: 20),
Row(
children: [
NgftRadioButton(
enabled: _enabled,
value: 'Item1',
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = value;
});
},
),
const Text('Item 1')
],
),
SizedBox(height: 5),
Row(
children: [
NgftRadioButton(
enabled: _enabled,
value: 'Item2',
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = value;
});
},
),
const Text('Item 2')
],
),
SizedBox(height: 5),
Row(
children: [
NgftRadioButton(
enabled: _enabled,
value: 'Item3',
groupValue: _radioValue,
onChanged: (value) {
setState(() {
_radioValue = value;
});
},
),
const Text('Item 3')
],
),
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: [
SizedBox(height: 20),
Row(
children: [
NgftCheckbox(
enabled: _enabled,
value: checkbox1,
onChanged: (value) {
setState(() {
checkbox1 = value;
});
},
),
const Text('Item 1')
],
),
SizedBox(height: 5),
Row(
children: [
NgftCheckbox(
enabled: _enabled,
value: checkbox2,
onChanged: (value) {
setState(() {
checkbox2 = value;
});
},
),
const Text('Item 2')
],
),
SizedBox(height: 5),
Row(
children: [
NgftCheckbox(
enabled: _enabled,
value: checkbox3,
onChanged: (value) {
setState(() {
checkbox3 = value;
});
},
),
const Text('Item 3')
],
),
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: 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) {
print(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: Icon(
Icons.chat,
color: Colors.grey,
),
timestamp: 'now',
senderName: 'Jubril',
action: TextButton(
onPressed: () {},
child: 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,
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__',
),
badgeNumber: 9,
),
const SizedBox(height: 30),
NgftAvatar(
size: NgftAvatarSize.medium,
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__',
),
badgeNumber: 20,
),
const SizedBox(height: 30),
NgftAvatar(
size: NgftAvatarSize.small,
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__',
),
badgeNumber: 999,
),
const SizedBox(height: 30),
NgftAvatar(
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__',
),
badgeNumber: 999,
),
const SizedBox(height: 30),
NgftAvatar(
size: NgftAvatarSize.large,
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__',
),
badgeNumber: 999,
),
const SizedBox(height: 30),
],
),
),
);
}
}Metadata
1
likes
0
points
50
downloads
Publisher
Weekly Downloads
Metadata
NGFT Design System is a Flutter library that provides a comprehensive set of reusable UI components, themes, and utilities. It enables developers to build consistent and scalable applications with customizable widgets designed to align with NGFT's brand guidelines.
License
unknown (license)
