The Flutter Series: Basic Widgets and Layout
The Complete Flutter Series is a series of articles focused on cross-platform app development on the Flutter framework for everyone from beginners to experienced mobile developers.
In the last article we talked about a Flutter project and the files it includes. We also explored the code of the default counter app and dived into how the app works. This article will explore a few basic widgets used in building a layout in a Flutter app.
Note: All code for the layout is added in the “build” method inside your app page.
Layouts in Flutter
Layouts in Flutter consist of a hierarchy of widgets with the outer widgets usually deal with alignment and structure whereas the inner elements are usually the visible elements on the page itself, like buttons and images, etc.
new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),In this example, there are three widgets: Center, Column and Text.
The Center and Column deal with structuring and aligning the elements inside them whereas the text is the only directly visible element in the app for a user.
A widget usually has properties for changing alignment, styles and attributes.
Let us now dive into individual widgets and see what they do.
We will split widgets into two rough categories:
- Visible Element Widgets
- Structuring and Alignment Widgets
Visible Element Widgets
These are a few commonly used Widgets
1. Text
A Text widget simply holds some text.
new Text(
'Hello, World!',
textAlign: TextAlign.center,
style: new TextStyle(fontWeight: FontWeight.bold),
)The text can be aligned using the textAlign property. The style property allows customisation of the text including font, font size, font weight, colour, letter spacing and a whole lot more.
2. Button
A Button widget allows a user to perform some action on click. Flutter does not have a direct “Button” widget, instead, it has types of button like a FlatButton and a RaisedButton.
new FlatButton(
child: Text("Click here"),
onPressed: () {
// Do something here
},
),
The onPressed property allows some action to be performed when the button is clicked.
new RaisedButton(
child: Text("Click here"),
elevation: 5.0,
onPressed: () {
// Do something here
},
),
Changing the elevation of the RaisedButton changes how much it stands out.
3. Image
The Image widget holds an image and can fetch it from multiple sources like assets or even directly from a URL. In normal native Android this would have required a secondary library like Picasso.
4. Icon
The icon widget is a container for an icon in Flutter.
new Icon(
Icons.add,
size: 36.0,
)It also contains a size attribute to enlarge the icon.
Structuring and Alignment Widgets
1. Column
A Column is a widget which arranges all its children widgets in a vertical stack. It can space the widgets according to the mainAxisAlignment and crossAxisAlignment property. Here the “main axis” is the vertical axis and the “cross axis” is the horizontal axis.
Lets construct a column of 3 text widgets.
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
"Element 1",
),
new Text(
"Element 2"
),
new Text(
"Element 3"
),
],
),The column has 3 text widgets inside it and the mainAxisAlignment is set to ‘center’.
This is how it looks like:
Because of the mainAxisAlignment being center, it centres all the widgets. Let’s try something else. Let’s set mainAxisAlignment to spaceBetween.
Now they’re too far apart, let’s try spaceEvenly.
To space it in between the left and right sides of the screen, you have to use crossAxisAlignment.
2. Row
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text(
"Element 1",
),
new Text(
"Element 2"
),
new Text(
"Element 3"
),
],
),A row is the same as a column but constructs a horizontal row of widgets rather than a column. The main difference here is the main axis is the horizontal axis rather than the vertical one. The cross axis is the vertical axis.
3. Center
A Center widget simply centers the child inside it. All the previous examples included rows and columns that were inside a center widget. If the column was not inside a center widget, it would shift to the left. Here’s an example:
Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text(
"Element 1",
),
new Text(
"Element 2"
),
new Text(
"Element 3"
),
],
),
),A center widget simply takes a child and centers it in the available space it is in.
4. Padding
Unlike in normal Android development where every view has its own padding attribute, padding is a widget that wraps other widgets to give them padding in all or specified directions.
This gives the text widget a padding of 8.0 in all directions.
Padding(
padding: const EdgeInsets.all(8.0),
child: new Text(
"Element 1",
),
),Padding in specific directions is also allowed.
Padding(
padding: EdgeInsets.fromLTRB(8.0, 0.0, 0.0, 0.0),
child: new Text(
"Element 1",
),
),5. Scaffold
A Scaffold Widget provdies a framework for adding common material design elements such as AppBars, Drawers, Floating Action Buttons, Bottom Navigation, etc.
new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: Center(
),
floatingActionButton: FloatingActionButton(
child:Icon(Icons.add),
onPressed: () {
}
),
)
6. Stack
A Stack is used to overlap widgets, like a button on a background gradient. A Stack is a very important widget and we will go into further detail in a future article.
These are the basic widgets required to make a decent functioning app in Flutter. Flutter also allows you to make your own widgets if you need any other functionality added or if you want to reuse some repeating widget pattern.
For the complete list of Flutter widgets, visit this link.
