66 Chapter 3.

Flutter: Basics

3.3 Exploring Basic Widgets

Perhaps it is time that we move on to explaining what widgets do and how to configure them properly.

3.3.1 Center

This widget creates a widget that centers its child.

Center Constructors
1 Center({
2 Key key,
3 double widthFactor,
4 double heightFactor,
5 Widget child
6 })

As you can see the Center widget has four parameter, don’t worry about the Key parameter for now,
however the other three are useful for us in this particular way, imagine that you provide the Center
widget with a child and there is no constraints of size is enforced; so the widget will take up as much
as space that it can, but if you provide it with a widthFactor or heightFactor, the width or height
of the widget will be effected by these parameters. For example if widthFactor is 2 then the width
of Center widget will be twice the width of its child.

3.3.2 Text

We are already somewhat familiar with this widget, the main function of the Text is to output (display)
a string of text with a single style, although that style argument is optional.

Text Constructors
1 Text(
2 String data, // Takes a stream of data with string type
3 {Key key, // Identifier
4 TextStyle style, // Styling the data (See the next section)
5 StrutStyle strutStyle, // Defines the min height relative to
�→ baseline
 3.3 Exploring Basic Widgets 67

6 TextAlign textAlign, // Alignment of text (e.g. center)

7 TextDirection textDirection, // Direction of text (e.g. left-to-right)
8 Locale locale, // Identifier of language and formatting
�→ (e.g. en)
9 bool softWrap, // Text break at soft line breaks
10 TextOverflow overflow, // Handling of overflowing text
11 double textScaleFactor, // Text scale factor (e.g. 1.5 => 50%
�→ larger)
12 int maxLines, // Max number of lines for text to span
13 String semanticsLabel // Indication of purpose for accessibility
�→ reasons
14 })

-TextStyle

The Text widget uses the TextStyle class for providing configurations of styling with these arguments:

TextStyle
1 TextStyle({
2 bool inherit: true, // Inherit from parent
3 Color color, // Color of text
4 Color backgroundColor, // Background color of text
5 double fontSize, // Size of font
6 FontWeight fontWeight, // Thickness of typeface (e.g. bold)
7 FontStyle fontStyle, // Variant of typeface (e.g. italics)
8 double letterSpacing, // Amount of space between letters
9 double wordSpacing, // Amount of space between words
10 TextBaseline textBaseline, // Common baseline between this text and
�→ its parent
11 double height, // Height of text span as a multiple of
�→ font size
 68 Chapter 3. Flutter: Basics

12 Locale locale, // Used locale for region-specific

�→ formatting
13 Paint foreground, // Used for painting text as foreground in
�→ canvas
14 Paint background, //Used for painting text as background in
�→ canvas
15 List<Shadow> shadows, // A list of shadows painted beneath the
�→ text
16 TextDecoration decoration, // Decoration of text (e.g. underline)
17 Color decorationColor, // Color of decoration
18 TextDecorationStyle decorationStyle, // Style of decoration (e.g. dashed)
19 double decorationThickness, // Thickness of decoration strokes
20 String debugLabel, // A human friendly description about this
�→ style
21 String fontFamily, // Family of the used font
22 List<String> fontFamilyFallback, // A list of fonts to fall back on when a
�→ higher priority font family cannot be found.
23 String package // Name of the package from which this
�→ style is included
24 })

� Example 3.1 Here is a combination of Text widget and TextStyle:

Text&TextStyle
1 Text(
2 'Hello World',
3 style: TextStyle(
4 color: Colors.red,
5 fontSize: 20,
6 fontWeight: FontWeight.bold,
7 decoration: TextDecoration.underline,
 3.3 Exploring Basic Widgets 69

8 letterSpacing: 5.5),
9 ),

3.3.3 Icon

Flutter comes with bundle of material icons which we can use easily with the help of Icon widget.
Have in mind that icons are not interactive themselves, however we can use a widget called IconBut-
ton for this purpose, we will discuss this widget later on. Let’s look at Icon properties (Remember
that it is necessary to provide an IconData, all other properties are optional):

Icon Constructors
1 Icon(
2 IconData icon, // Provides a description of an icon drawed using
�→ a font glyph
3 {
4 Key key, // Key identifier of widget
5 double size, // Size of icon
6 Color color, // Color configuration of icon
7 String semanticLabel, // Indication of purpose for accessibility reasons
8 TextDirection textDirection // Direction which icon appears with text (e.g.
�→ ltr)
9 })

� Example 3.2 An example of an alarm icon with blue color and size of 25:

Icon
1 Icon(
2 Icons.alarm,
3 color: Colors.blue,
4 size: 25)
 70 Chapter 3. Flutter: Basics

3.3.4 Container

Flutter provides us with a number of wonderful widgets to help out easily layout the applications
with an extended amount of freedom and abilities. One of the most primarily layout widget is called
Container. This widget has a suite of common configurations for structuring the layout like painting,
sizing, padding and positioning.
Container like so many other things in Flutter is based on its own etymology, hence the Container
widget contains a child of type widget, surrounds it with a padding then applies additional constraints
like width or height.
We can pass certain arguments to Container like alignment, padding, color, transformation and more.
Let’s take a look at all of the properties of Container widget:

Container Constructors
1 Container({
2 Key key, // Identifier of the widget
3 AlignmentGeometry alignment, // Alignment of the widget (e.g.
�→ AlignmentDirectional.center)
4 EdgeInsetsGeometry padding, // Ass padding (e.g. EdgeInsets.all(10) )
5 Color color, // Color of the container
6 Decoration decoration, // Provides decoration using other methods
�→ like BoxDecoration()
7 Decoration foregroundDecoration, // Provides foreground decoration
8 double width, // Width of the container
9 double height, // Height of the container
10 BoxConstraints constraints, // Provides min and max constraints of width
�→ and height
11 EdgeInsetsGeometry margin, // Adds margin (e.g. EdgeInsets.all(10) )
12 Matrix4 transform, // Transforms the container (e.g. rotation)
13 Widget child // Child of the container
14 })
 3.3 Exploring Basic Widgets 71

R Please be aware that the color argument is a shorthand for decoration:BoxDecoration(color:

color) so you cannot use color and decoration together. Instead you must use it one at a
time or only within the decoration property.

� Example 3.3 Let us now construct a container with these properties:

1. A red container in center of the screen with width of 50.

2. A centered red container with width and height of 200, padding of 10 which shows a string of
"Hello" with a font size of 50.

3. In the above condition, center the "Hello" string.

Here is the boilerplate code of this app without the Container specifications:

Boilerplate #MyApp
1 import 'package:flutter/material.dart';
2

3 void main() => runApp(MyApp());

4

5 class MyApp extends StatelessWidget {

6 @override
7 Widget build(BuildContext context) {
8 return MaterialApp(
9 home: Scaffold(
10 appBar: AppBar(
11 title: Text('My App'),
12 ),
13 body: Container(
14

15 ),
16 ),
17 );
18 }
19 }
 72 Chapter 3. Flutter: Basics

You should put given containers inside the body part of code.
Container #1:

Container #1
1 Center(
2 child: Container(
3 child: null,
4 color: Colors.red,
5 width: 50,
6 ),
7 ),

Container #2:
Container #2
1 Center(
2 child: Container(
3 child: Text(
4 'Hello',
5 style: TextStyle(fontSize: 50),
6 ),
7 color: Colors.red,
8 width: 200,
9 height: 200,
10 padding: EdgeInsets.all(10),
11 ),
12 ),

Container #3:
 3.3 Exploring Basic Widgets 73

Container #3
1 Center(
2 child: Container(
3 child: Text(
4 'Hello',
5 style: TextStyle(fontSize: 50),
6 ),
7 color: Colors.red,
8 width: 200,
9 height: 200,
10 padding: EdgeInsets.all(10),
11 alignment: AlignmentDirectional.center,
12 ),
13 ),

Notice that by adding an alignment we can control the alignment property of the child (In this
case a text). �

3.3.5 Column

Now that we are acquainted with the Container widget and its much useful properties, we must move
on to another layout component of Flutter, which is called Column widget, to simply put this widget
will represent its children in a vertical array. It is important to know that the Column widget does not
support scrolling, subsequently if you put more children in a Column that it can fit, it is considered as
an error.
There are other widgets that provides us with scrolling options which we will discuss later. Here is
the basic syntax of Column widget at its simplest form: Column(children: <Widget>[])
As you can see on the second line the Column widget will accept a list of type widgets as its children
and then puts them in a vertical array with a first come first served attitude. Let us explain the
properties of Column widget and then we will wrap it up with some examples.
 74 Chapter 3. Flutter: Basics

Column Constructors
1 Column({
2 Key key,
3 // Widget Identifier
4 MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
5 // The vertical axis alignment (e.g. center, end)
6 MainAxisSize mainAxisSize: MainAxisSize.max,
7 // The vertical axis size (max and min)
8 CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
9 // The horizontal axis alignment (e.g. baseline, stretch)
10 TextDirection textDirection,
11 // Direction of Text
12 VerticalDirection verticalDirection: VerticalDirection.down,
13 // Vertical direction of the array (up and down)
14 TextBaseline textBaseline,
15 // A horizontal line used for aligning text
16 List<Widget> children: const []
17 // List of widgets as Column children
18 })

� Example 3.4 In this example we will construct a basic column with three widgets inside,we will

use the same boilerplate code for wrapping column inside of it. (Note that the Column widget will be
inside the Center widget).

ColumnExample
1 Column(
2 children: <Widget>[
3 Icon(Icons.assessment, size: 100),
4 Icon(Icons.assignment_ind, size: 100),
5 Icon(Icons.assignment_turned_in, size: 100)],)
3.3 Exploring Basic Widgets 75

�
76 Chapter 3. Flutter: Basics

For better understanding of Column widget properties let us construct a table of some of the most
important configurations:

mainAxisAlignment:

MainAxisAlignment.start MainAxisAlignment.center MainAxisAlignment.end

MainAxisAlignment.spaceEvenly
MainAxisAlignment.spaceAround MainAxisAlignment.spaceBetween
 3.3 Exploring Basic Widgets 77

Syntax
1 Column(
2 mainAxisAlignment: MainAxisAlignment.spaceAround, //.end .center .start
�→ .spaceEvenly .spaceBetween
3 children: <Widget>[
4 Icon(Icons.assessment, size: 100),
5 Icon(Icons.assignment_ind, size: 100),
6 Icon(Icons.assignment_turned_in, size: 100)
7 ],
8 )

verticalDirection:

VerticalDirection.up VerticalDirection.down

3.3.6 Row

The Row widget is in a way just a rotated form of Column widget which takes a list of children and
then displays them on a horizontal array. The syntax is very similar to Column widget. Hence, if you
 78 Chapter 3. Flutter: Basics

are interested go and check Column widget properties. Let us show an example of Row widget:

� Example 3.5 A row of three digits (1, 2, 3)

RowExample
1 Row(
2 mainAxisAlignment:
�→ MainAxisAlignment.spaceAround,
3 children: <Widget>[
4 Text("1", style: TextStyle(fontSize:
�→ 100),),
�
5 Text("2", style: TextStyle(fontSize:
�→ 100),),
6 Text("3", style: TextStyle(fontSize:
�→ 100),)
7 ],
8 )

3.3.7 Image

Working with images in Flutter can be a little inflexible at times, however Flutter provides many ways
to include and display images inside the application:

• Image

• Image.asset

• Image.network

• Image.file

• Image.memory

In this section we will look at two of the most convenient and useful ways of adding images in Flutter;
the Image.network and Image.asset.
 3.3 Exploring Basic Widgets 79

–Image.network

By using the Image.network widget we can directly summon images from the internet and then
display them on our applications. Here is the properties of this widget:

Image.network Constructors
1 Image.network(
2 String src,
3 // The source (Commonly a URL) of image in string form
4 {
5 Key key,
6 // Widget Identifier
7 double scale: 1.0,
8 // Scale of the image (By default 1.0 for original scale)
9 String semanticLabel,
10 // Semantic label for the widget
11 bool excludeFromSemantics: false,
12 // Whether to exclude gestures of this widget from semantic tree
13 double width,
14 // The width of image
15 double height,
16 // The height of image
17 Color color,
18 // Color of the image
19 BlendMode colorBlendMode,
20 // Blending color options for image
21 BoxFit fit,
22 // Adjusting fitting of image
23 AlignmentGeometry alignment: Alignment.center,
24 // Alignment of image
25 ImageRepeat repeat: ImageRepeat.noRepeat,
26 // Whether to repeat image or not
27 Rect centerSlice,
 80 Chapter 3. Flutter: Basics

28 // Slicing the image

29 bool matchTextDirection: false,
30 // Whether to paint image in direction of text
31 bool gaplessPlayback: false,
32 // Whether to continue showing the old image (true), or briefly show nothing
�→ (false), when the image provider changes.
33 FilterQuality filterQuality: FilterQuality.low,
34 // Quality levels of image filters
35 Map<String, String> headers
36 // Custom headers for retrieving the image if needed
37 })

� Example 3.6 Getting image from the internet directly

Image.network
1 Image.network(
2 "https://www.google.com/logo.png", �

3 )

� Example 3.7 Changing the color of that image

 3.3 Exploring Basic Widgets 81

Image.network
1 Image.network(
2 "https://www.google.com/logo.png",
�
3 color: Colors.amber
4 )

� Example 3.8 Blending with the color of image

Image.network
1 Image.network(
2 "https://www.google.com/logo.png",
3 color: Colors.amber, �

4 colorBlendMode: BlendMode.difference,
5 )

� Example 3.9 Image.network custom headers usage:

Image.network
1 Image.network(
2 'https://someremotserver.com/picture1',
3 headers: {
4 'Authentication': 'My Auth 001',
5 },
6 )