Creating User Interfaces with Flutter
1 App Development
1.1 Blank App
import 'package:flutter/material.dart';
// Program execution starts here
void main(){
// run our app which is a MaterialApp
// This allows us to use Material Design
// MaterialApp is a very good choice for Android
runApp(MaterialApp(
// The home parameter specifies the screen we want to show
home: Home(),
));
}
// This is the screen we want to develop
// It inherits from StatelessWidget
// In this example, we use StatelessWidget,
// in future, we see Stateful Widget.
class Home extends StatelessWidget{
// BuildContext is an object that represents the location of a widget in the widget tree.
// It allows a widget to access information about its parent, child, and surrounding context.
@override
Widget build(BuildContext context)
{
// This holds everything inside the widget
return Scaffold(
);
}
}
1.2 Adding an App Bar
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context)
{
return Scaffold(
// Inside the Scaffold, we can continue building our widget tree,
// we add an AppBar
appBar: AppBar(
title: const Text('Page Title'),
centerTitle: true,
backgroundColor: Colors.blue[500],
),
);
}
}
1.3 Adding a Text Widget to the Body of the Scaffold
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: const Text('Page Title'),
centerTitle: true,
backgroundColor: Colors.blue[500],
),
// Add a Text widget to the body of the of Scaffold
body: Text('Hello!'),
);
}
}
1.4 Centering the Added Text Widget
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: const Text('Page Title'),
centerTitle: true,
backgroundColor: Colors.blue[500],
),
// Add a Center widget to the body
// It will center everything inside it
body: Center(
// Nested widgets are added using the parameter child
child: Text('Hello!'),
),
);
}
}
1.5 Changing the Text Styling
Go to https://api.flutter.dev/flutter/widgets/Text-class.html and explore the different options we have. The following is an extract of what can be used.
-
maxLines →
int?
An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow. -
overflow →
TextOverflow?
How visual overflow should be handled. -
selectionColor →
Color?
The color to use when painting the selection. -
softWrap →
bool?
Whether the text should break at soft line breaks. -
strutStyle →
StrutStyle?
The strut style to use. Strut style defines the strut, which sets minimum vertical layout metrics. -
style →
TextStyle?
If non-null, the style to use for this text. -
textAlign →
TextAlign?
How the text should be aligned horizontally. -
textDirection →
TextDirection?
The directionality of the text.
Let’s say I want to use the style attribute, the documentation says it should be of type TextStyle. So let us see what TextStyle has to offer.
-
background →
Paint?
The paint drawn as a background for the text. -
backgroundColor →
Color?
The color to use as the background for the text. -
color →
Color?
The color to use when painting the text. -
debugLabel →
String?
A human-readable description of this text style. -
decoration →
TextDecoration?
The decorations to paint near the text (e.g., an underline). -
decorationColor →
Color?
The color in which to paint the text decorations. -
decorationStyle →
TextDecorationStyle?
The style in which to paint the text decorations (e.g., dashed). -
decorationThickness →
double?
The thickness of the decoration stroke as a multiplier of the thickness defined by the font. -
fontFamily →
String?
The name of the font to use when painting the text (e.g., Roboto). -
fontFamilyFallback →
List<String>?
The ordered list of font families to fall back on when a glyph cannot be found in a higher priority font family. -
fontFeatures →
List<FontFeature>?
A list of FontFeatures that affect how the font selects glyphs. -
fontSize →
double?
The size of fonts (in logical pixels) to use when painting the text. -
fontStyle →
FontStyle?
The typeface variant to use when drawing the letters (e.g., italics). -
fontVariations →
List<FontVariation>?
A list of FontVariations that affect how a variable font is rendered. -
fontWeight →
FontWeight?
The typeface thickness to use when painting the text (e.g., bold). -
foreground →
Paint?
The paint drawn as a foreground for the text. -
hashCode →
int
The hash code for this object. -
height →
double?
The height of this text span, as a multiple of the font size. -
inherit →
bool
Whether null values in this TextStyle can be replaced with their value in another TextStyle using merge. -
leadingDistribution →
TextLeadingDistribution?
How the vertical space added by the height multiplier should be distributed over and under the text. -
letterSpacing →
double?
The amount of space (in logical pixels) to add between each letter. A negative value can be used to bring the letters closer. -
locale →
Locale?
The locale used to select region-specific glyphs. -
overflow →
TextOverflow?
How visual text overflow should be handled. -
runtimeType →
Type
A representation of the runtime type of the object. -
shadows →
List<Shadow>?
A list of Shadows that will be painted underneath the text. -
textBaseline →
TextBaseline?
The common baseline that should be aligned between this text span and its parent text span, or, for the root text spans, with the line box. -
wordSpacing →
double?
The amount of space (in logical pixels) to add at each sequence of white-space (i.e., between each word). A negative value can be used to bring the words closer.
Here, we will change style to italic, bold, and we will change size as well.
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: const Text('Page Title'),
centerTitle: true,
backgroundColor: Colors.blue[500],
),
body: Center(
child: Text('Hello!',
// we add a style parameter which is a TextStyle widget
style: TextStyle(
// choose a color for the TextStyle widget
color: Colors.red[800],
// a style
fontStyle: FontStyle.italic,
// a size
fontSize: 24,
// a boldness
fontWeight: FontWeight.bold,
),
),
),
);
}
}
1.6 Changing the Font
If a font other than the default font is to be used, it must be supplied with the app.
-
We first need to obtain the font by downloading it (or creating it for the enthusiastic).
-
We need to create a folder in the IDE for the font, and then drag and drop the font file from the file manager to the created folder in the IDE.
-
Then, we need to modify the
pubspec.yamlby adding the following information at the bottom. The filepubspec.yamlis very sensitive about spaces, so always indent by exactly two spaces.flutter: uses-material-design: true # This is where I am adding the font fonts: # The name I am choosing for this font is NormandyBeach - family: NormandyBeach fonts: # This is the path to the font in the project - asset: lib/assets/fonts/NormandyBeach3DItalic.otf
After that, we can use the new font as follows.
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: const Text('Page Title'),
centerTitle: true,
backgroundColor: Colors.blue[500],
),
body: Center(
child: Text('Hello!',
style: TextStyle(
color: Colors.red[800],
fontStyle: FontStyle.italic,
fontSize: 24,
fontWeight: FontWeight.bold,
// a font family
fontFamily: 'NormandyBeach',
),
),
),
);
}
}