Flutter UI Components : FLUTTER PART IV

Rajeev Singh
Aug 28, 2018 · 6 min read

In this article we will be discussing about all the basic widget we can use to make an awesome looking mobile applications using Flutter.

We will be covering a range of different widgets with the code sample to achieve a design layout in a two articles. Finding these widgets and getting the respective sample code is easy from the Flutter website, hence we will focus more on architecting those widgets in application making them reusable in a full-fledge scalable application.

The topics we will deal with are as follows :

  1. Text and Text Field widgets
  2. Button, Checkbox, Radio, Switch
  3. Images
  4. Relative positioning of widgets : Row, Column, Container, Padding, Center,
  5. Material components : Scaffold, AppBar, BottomNavigationBar, TabBarView, MaterialApp, Drawer, FloatingActionButton, PopupMenuButton.
  6. Dialogs, Alerts, BottomSheet, ExpansionPanel, Snackbar
  7. Chips, Tooltip, LinearProgressIndicator.
  8. ListView, GridView, Cards, Stepper, Divider.

But before we start to discuss these widgets, it is important that we first understand some key concept related to flutter widgets architecture.

As we all know that everything in flutter is a widget, it is important for us to understand one key concept while choosing what type of widget will a situation demand to get the desired layout to perform as per product requirement i.e. State of a widget.

Every widget in flutter that can behave different under different situation in an application comes under the category of Stateful Widget.

StateFulWidgets :
These reply upon some conditions or dataset which can change on user interactions or other situation in a single context. They store their mutable state in a subclass of State

One can call setState() with updated set of dataset to redraw the layout for that particular state.

In situations where the view is independent of the context in which it is to render differently for one particular situation then we use Stateless Widgets.

Stateless Widgets:
All the member variable need to be declared final indicating a fixed UI during one rendering session depending on initialisation values.

Views corresponding to different design patterns are passed down to rendering layer and painted on the canvas using Flutter engine. These widgets can interact with gestures and other user interactions as structured by their respective guidelines.

Now lets start discussing about these layouts one by one.

1. Playing around with Texts:

We come across requirements from UI team to use a particular style of text style for different uses. So we will begin with architecting ui utility class which we will be referencing throughout our application.

Starting with heading texts : H1, H2, H3, H4, H5

~utils/ui_utils.dartconst String POPPINS_FONT='Poppins';
const String NUNITOSANS_FONT='NunitoSans';
Widget textH1(String text, int maxLines) {
return Text(
text,
maxLines: maxLines,
style: TextStyle(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold, // bold weight
color: grey0,
fontFamily: POPPINS_FONT,
fontSize: 36.0),
);
}
...Widget textH3(String text, int maxLines) {
return Text(
text,
maxLines: maxLines,
style: TextStyle(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal, // regular weight
color: grey0,
fontFamily: POPPINS_FONT,
fontSize: 18.0),
);
}
...

We are using fixed set of colors which can be defined in one place :

~/utils/colors.dartimport 'dart:ui';

Color grey0 = const Color(0xff291f33);
Color grey1 = const Color(0xff5e5766);
Color grey2 = const Color(0xff948e99);
Color grey3 = const Color(0xffd8d7d9);

Color surface = const Color(0xfff7fef0);

Color primary = const Color(0xffff5c26);
Color primary_light = const Color(0xffffe2d9);

Color secondary_dark = const Color(0xffb9de00);
Color secondary = const Color(0xffdff763);
Color secondary_light = const Color(0xfff7ffcc);

Color tertiary = const Color(0xff2681ff);
Color tertiary_light = const Color(0xffd9e9ff);

Color highlight = const Color(0xff00d7eb);

Color purple = const Color(0xffc68cff);
Color purple_light = const Color(0xfff2e6ff);

Color white = const Color(0xffffffff);

Do put the respective fonts in project directory at :

1. 
# paste fonts in the project directory under fonts folder
flutter_intro/
fonts/
Poppins-Regular.ttf
Poppins-Italic.ttf
NunitoSans-Regular.ttf
NunitoSans-Bold.ttf
2.
# mention the following family in pubspecs.yalm file
flutter:
fonts:
- family: NunitoSans
fonts:
- asset: fonts/NunitoSans-Regular.ttf
- asset: fonts/NunitoSans-Italic.ttf
style: italic
- family: Poppins
fonts:
- asset: fonts/Poppins-Regular.ttf
- asset: fonts/Poppins-Bold.ttf
weight: 700

We also have an option to show styled text using Text.Rich widget like :

new RichText(
text: new TextSpan(
style: TextStyle(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: grey0,
fontFamily: POPPINS_FONT,
fontSize: 16.0),
children: <TextSpan>[
new TextSpan(
text: 'TEST test. ',
style: new TextStyle(color: Colors.black.withOpacity(0.6)),
),
new TextSpan(
text: 'TEST test. ',
style: new TextStyle(color: Colors.black.withOpacity(0.8)),
),
new TextSpan(
text:
'TEST test.',
style: new TextStyle(color: Colors.black.withOpacity(1.0)),
),
],
),
)

Now lets discuss about views that helps you in taking text input from the user. In flutter we have largely two view to do just that : TextFields and TextFormInput.

TextFormInput wraps around TextField to give us some added functionality of form validation.

new TextField(
autocorrect: true,
maxLines: 1,
// onChanged: onChanged, : to do something on text change
// onSubmitted: onSubmitted, : to do something when submitted
decoration: new InputDecoration(
counterText: "test",
filled: true,
fillColor: grey3,
hintText: 'Enter text here...'));
}

To do something when user type something in the text field we can use controller argument.

final myController = new TextEditingController();new TextField(
onChanged: ...,
decoration: ...,
autofocus: true|false,
controller: myController
)
myController.addListener(_someFunction);

2 . Button, Checkbox, Radio and Switch

Buttons in flutter :

  1. RaisedButton
new RaisedButton(
child: const Text(
'Test goes here!',
style: TextStyle(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Colors.white,
fontFamily: NUNITOSANS_FONT,
fontSize: 16.0),
),
color: Theme.of(context).accentColor,
elevation: 4.0,
splashColor: Colors.white30,
onPressed: () {
// Perform some action
},
);
/* 
wide variety of options are available in the constructor like
const RaisedButton({
Key key,
@required this.onPressed,
this.color,
this.highlightColor,
this.splashColor,
this.disabledColor,
this.elevation: 2.0,
this.highlightElevation: 8.0,
this.disabledElevation: 0.0,
this.colorBrightness,
this.child
}) : super(key: key);
*/

2. Checkbox

class _UiComponentScreenState extends State<UiComponentScreen> {
bool checkboxValue = false;

@override
initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body:

...
... Checkbox(
value : checkboxValue,
onChanged:
(bool checked) =>
setState(() => checkboxValue = checked),
activeColor: Colors.amber,
),
... ...
);
}
}

3. Radio

...
...
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue,
onChanged: (value)=>_handleRadioValueChange(value),
activeColor: Colors.amber,
),
new Radio(
value: 1,
groupValue: _radioValue,
onChanged: (value)=>_handleRadioValueChange(value),
activeColor: Colors.amber,
),
new Radio(
value: 2,
groupValue: _radioValue,
onChanged: (value)=>_handleRadioValueChange(value),
activeColor: Colors.amber,
),
],
),
...
...
...
...
// state variable
String _result = "none";
int _radioValue = 0;

void _handleRadioValueChange(int value) {
setState(() {
_radioValue = value;

switch (_radioValue) {
case 0:
_result = 'first';
break;
case 1:
_result = 'second';
break;
case 2:
_result = 'third';
break;
}
});
}
...
...

Images

A widget that displays an image.

Several constructors are provided for the various ways that an image can be specified:

gradeup

India's most effective preparation platform

Rajeev Singh

Written by

Tech geek | Artistically Inclined | Android is ♥️

gradeup

gradeup

India's most effective preparation platform

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade