flutter_ui_toolkit

Description:

flutter ui toolkit

Flutter UI Toolkit #
The development of this package is still in progress. More widgets are to come.
However because the widgets are purely Flutter widgets, you can use it with no fear :)
copied to clipboard
Flutter UI Toolkit is a pre-built collection of the most used widgets to create apps,
the basic ones like: Buttons, Inputs, Headings, Dialogs, Action Sheets, etc..
The idea is that you can use these widgets the way you use classes in HTML and CSS and be a simple helper.
The widgets can receive an argument called as that will carry the widget's styles.
The advantage of this approach is that we don't need to repeat styling every time we create a new widget.
In addition to custom styles, this package also provides native look and feel to the widgets.
This is useful when you want to have one widget that displays the right look and feel based on the Platform.
Widgets #

UIButton
UIHeading
UIBottomSheet
UITextField
UIContainer
UIActionSheet
UIDialog

Roadmap #



Widget
Status




Modals
in progress



Examples #


iOS

Android







UIButton #
This widget provides a full customizable button.
There are three kind of buttons you can choose from:
UIButton.solid(),
UIButton.outlined(),
UIButton.native(),
copied to clipboard
To create default styles for the button you need to create a class of type UIButtonDefaults.
You can have a separated directory where you add all your default styles.

// styles/buttons.dart

final primaryButton = UIButtonDefaults(
elevation: 10.0,
borderRadius: 50.0,
borderColor: Colors.purple,
borderWidth: 2.0,
labelColor: Colors.purple,
bgColor: Colors.white,
widthFactor: 0.5, // sets the button width
);
copied to clipboard
Then use the button anywhere in your application.

import 'styles/buttons.dart';

// Outlined Button
UIButton.outlined(
as: primaryButton,
label: "Outlined Button",
onPressed: () => print('Call API'),
),

// Solid Button
UIButton.solid(
as: primaryButton,
label: "Solid Button",
onPressed: () => print('Call API'),
),


// Native Button
UIButton.native(
label: "Button",
onPressed: () => print('Call API'),
),


copied to clipboard
UIHeading #
This widget can be used to create custom headings or text content.
To create default styles for the heading you need to create a class of type UIHeadingDefaults.
You can have a separated directory where you add all your default styles.
// styles/headings.dart

final articleTitle = UIHeadingDefaults(
heading: 2,
color: Colors.pink,
fontWeight: FontWeight.bold,
);

copied to clipboard
We can also add custom styles to UIHeading as well
/// Use Google Fonts to set font family and extend stylyes

final articleTitleLato = UIHeadingDefaults(
color: Colors.pink,
style: GoogleFonts.lato(
fontSize: 40.0,
),
);


copied to clipboard
Then use the headings anywhere in your application.
import 'styles/headings.dart'

// Use articleTitle
UIHeading(
as: articleTitle,
text: 'Article Title',
),


// Use articleTitleLato
UIHeading(
as: articleTitleLato,
text: 'Big title using font Lato',
),
copied to clipboard
UIBottomSheet #
Use UIBottomSheet when you want to display a bottomsheet.
Set floatted: true if you want the bottom sheet to be floatted (have margin all around it, like some iOS bottom sheets)
You can also have a trailing Widget that can be useful for a close button when you have enableDrag set to false.


Full Width

Floatted







How to use: #
Create a function that calls UIBottomSheet.show().
Call the function when you need it (eg.: on tap on a button)
// Set up the bottom sheet

Future<void> _openBottomSheet(BuildContext context) async {
await UIBottomSheet.show(
context: context,
floatted: true,
hideHead: false,
content: Container(
alignment: Alignment.center,
height: 400,
child: UIHeading(
heading: 3,
text: 'Some cool content',
),
),
);
}

// Open the bottom sheet

UIButton.native(
label: 'Open Bottom Sheet',
onPressed: () async {

// OPEN BOTTOM SHEET
// and wait until it's closed
await _openBottomSheet(context);

// proceed
print('Bottom sheet closed');
},
),

copied to clipboard
UITextField #
This widget renders a input text field.
There are two kind of text fields you can choose from:
UITextField(),
UITextField.native(),
copied to clipboard
To create default styles for the text field you need to create a class of type UITextFieldDefaults.
You can have a separated directory where you add all your default styles.
// styles/inputs.dart


final primaryInput = UITextFieldDefaults(
borderColor: Colors.black45,
borderRadius: 8,
borderType: UIBorderType.outlineBorder,
borderWidth: 2.0,
hintColor: Colors.black54,
bgColor: Colors.white,
);

copied to clipboard
Then use the inputs anywhere in your application.
import 'styles/inputs.dart'

UITextField(
as: primaryInput,
hint: 'Email',
),

// Native Text Field
UITextField.native(
hint: 'Email',
),

copied to clipboard
UIContainer #
This widget renders a customizable Container.
To create default styles for the container you need to create a class of type UIContainerDefaults.
You can set the size of the contianer by using the widthFactor argument.
You can have a separated directory where you add all your default styles.

// styles/containers.dart

final errorContainer = UIContainerDefaults(
padding: EdgeInsets.all(20),
borderRadius: 10,
widthFactor: 1.0, // make full width
borderColor: Colors.red,
borderWidth: 2.0,
color: Colors.red.shade100,
);

copied to clipboard
Then use the button anywhere in your application.

import 'styles/containers.dart';

// Show container with error styling
UIContainer(
as: errorContainer,
child: Text('This is a box with a nice shadow\nand a cool rounded border.'),
),

copied to clipboard
UIActionSheet #
This widget creates a Native Action Sheet.
Compared with the other classes in this package,UIActionSheet is a bit more verbose.
However you write once for all platforms.
How to use: #
Create a function that calls UIActionSheet.show().
The actions need to be of type UIAction.
Call the function when you need it (eg.: on tap on a button)
See example below:
// Creates a Native Action Sheet Factory

void _openActionSheet(BuildContext context) {
UIActionSheet.show(
context,

/// TITLE
title: UIHeading(
text: 'Select you favorite color',
color: Colors.blue,
textAlign: TextAlign.center,
heading: 5,
),

/// CONTENT
content: Text('We will use the color on your profile.'),

/// ACTIONS
actions: [
UIAction(
child: Text('Red'),
onPressed: () => Navigator.of(context).pop(),
),
UIAction(
child: Text('Green'),
onPressed: () => Navigator.of(context).pop(),
),
UIAction(
child: Text('Bue'),
onPressed: () => Navigator.of(context).pop(),
),
UIAction(
child: Text('Pink'),
onPressed: () => Navigator.of(context).pop(),
),
],

/// CANCEL BUTTON
cancel: UIAction(
child: UIHeading(
text: 'Cancel',
color: Colors.red,
heading: 4,
),
onPressed: () => print('Cancel'),
),
);
}

// Will open action sheet based on the current OS

UIButton.solid(
as: solidButtonStyles,
label: "Open Action SHeet",
onPressed: () => _openActionSheet(context),
),

copied to clipboard
UIDialog #
This widget creates a Native Dialog.
Compared with the other classes in this package, UIDialog is a bit more verbose.
However you write once for all platforms.
How to use: #
Create a function that calls UIDialog.show().
The actions need to be of type UIAction.
Call the function when you need it (eg.: on tap on a button)
See example below:
// Creates a Native Dialog Factory

void _openDialog(BuildContext context) {
UIDialog.show(
context,

/// TITLE
title: Text('Are you sure?'),

/// CONTENT
content: Text('You cannot reverse this action.'),

/// ACTIONS
actions: [
UIAction(
child: Text('YES'),
onPressed: () => print('YES'),
),
UIAction(
child: Text('NO'),
onPressed: () => Navigator.of(context).pop(),
),
],
);
}

// Will open a dialog based on the current OS

UIButton.solid(
as: solidButtonStyles,
label: "Open Dialog",
onPressed: () => _openDialog(context),
),
copied to clipboard
If you find any bug or want to request a feature, feel free to open an issue on Github.
https://github.com/nobrefelipe/flutter_ui_toolkit/issues
I will be improving this package bit by bit and will always try to keep it simple and objective.
If you want to connect with me, send a request on Linkedin:
https://www.linkedin.com/in/felipe-nobre/
Thanks for watching :) #