Printing stylish text on the screen

Almost every app has to display some text.

Flutter has a powerful and fast text engine that can render all the rich text that you'd expect from a modern mobile framework.

In this recipe, we will be drawing text with Flutter's two primary widgets – Text and RichText. The Text widget is the most common way to quickly print text on the screen, but you will also occasionally need RichText when you want to add even more style within a single line.

Getting ready

To follow along with this recipe, you should have completed all of the previous recipes in this chapter.

Create a new file called text_layout.dart in your project's lib directory.

As always, make sure that your app is running in either a simulator/emulator or an actual device to see the changes in your app in real time with the hot reload feature.

How to do it...

Let's get started with some basic text:

• In your text_layout.dart file, add the shell for a class called TextLayout...

Importing fonts and images into your app

Text and colors are nice, but pictures are often worth a thousand words. The process of adding custom images and fonts to your app is a little more complex than you might be expecting. Flutter has to work within the constraints of its host operating systems, and since iOS and Android like to do similar things in different ways, Flutter creates a unified abstraction layer on top of their filesystems.

In this recipe, we will be using asset bundles to add a photo at the top of the screen and use a custom font.

Getting ready

You should have completed the previous recipe in this chapter, Printing stylish text to the screen, before following along with this one.

You will add an image to the app. You can get some great free stock photography from Unsplash. Download this beach image by Khachik Simonian as well: https://unsplash.com/photos/nXOB-wh4Oyc.

How to do it...

Let's update the previous recipe's code with some new fonts:

1. Open the pubspec...

Creating immutable widgets

There are two kinds of visual widget in Flutter: stateless and stateful.

A stateless widget is simple, lightweight, and performant. Flutter can render hundreds of stateless widgets without breaking a sweat.

Stateless widgets are immutable. Once they are created, they cannot be modified. Flutter only has to concern itself with these widgets once. It doesn’t have to maintain any complex life cycle states or worry about a block of code modifying them. In fact, the only way to modify a stateless widget is by deleting it and creating a new one.

How to do it...

Start off by creating a brand-new Flutter project called flutter_layout, either via your IDE or the command line. Don’t worry about the sample code generated. We’re going to delete it and start from scratch:

1. Open main.dart and delete everything.
2. Then, type the following code into the editor:

   void main() => runApp(const...

Using a Scaffold

Android and iOS user interfaces are based on two different design languages. Android uses Material Design, while Apple has created the Human Interface Guidelines for iOS, but the Flutter team calls the iOS design pattern Cupertino, in honor of Apple’s hometown. These two packages, Material Design and Cupertino, provide a set of widgets that mirror the user experience of their respective platforms.

These frameworks use a widget called Scaffold (CupertinoScaffold in the Cupertino framework) that provides a basic structure of a screen. 

In this recipe, you are going to give your app some structure. You will be using the Scaffold widget to add an AppBar to the top of the screen and a slide-out drawer that you can pull from the left.

Getting ready

You should have completed the previous recipe in this chapter before following along with this one.

Create a new file in the project...

Using the Container widget

We’ve already played around a bit with the Container widget in the previous recipes, so now we will build upon what you’ve seen before and add other features of this versatile widget. In this recipe, you will add some new effects to the existing ImmutableWidget.

Getting ready

Before following this recipe, you should have completed the two previous recipes in this chapter, Creating immutable widgets, and Using a Scaffold.

I suggest you also leave the app running while you are typing your code, so you can see your changes via hot reload every time you save your file.

How to do it...

Let’s start by updating the small box in the center and turning it into a circle:

1. In the ImmutableWidget class, replace the third Container with this method:

   @override
   Widget build(BuildContext context) {
     return Container(
       color: Colors.green,
       child: Padding(
       ...

Printing stylish text on the screen

Almost every app has to display some text. Flutter has a powerful and fast text engine that can render all the rich text that you’d expect from a modern mobile framework.

In this recipe, we will be drawing text with Flutter’s two primary widgets—Text and RichText. The Text widget is the most common way to quickly print text on the screen, but you will also occasionally need RichText when you want to add even more style within a single line.

Getting ready

To follow along with this recipe, you should have completed all of the previous recipes in this chapter.

Create a new file called text_layout.dart in your project’s lib directory.

As always, make sure that your app is running in either a simulator/emulator or an actual device to see the changes in your app in real time with the hot reload feature.

How to do it...

Let’s get started with...

Importing fonts and images into your app

Text and colors are nice, but pictures are often worth a thousand words. The process of adding custom images and fonts to your app is a little more complex than you might expect. Flutter has to work within the constraints of its host operating systems, and since iOS and Android like to do similar things in different ways, Flutter creates a unified abstraction layer on top of both of their filesystems.

In this recipe, we will be using asset bundles to add a photo at the top of the screen and use a custom font.

Getting ready

You should have completed the previous recipe in this chapter, Printing stylish text on the screen, before following along with this one.

You will add an image to the app. You can get some great free stock photography from Unsplash. Download this beach image by Khachik Simonian as well: https://unsplash.com/photos/nXOB-wh4Oyc.

How to do it...

Let’s update the previous recipe’...

Summary

In this chapter, you have had an introduction to building user interfaces in a Flutter app.

You have seen how to create immutable widgets and use them in your apps.

The chapter covered the use of the Scaffold widget, which provides a basic structure for screens in your apps.

You have also used Containers, powerful widgets that provide several layout-related properties and effects.

You have used the Text widget to print text on the screen, and seen how to customize the font, color, size, and other properties of the text.

You’ve seen how to import fonts and images into a Flutter app: in particular, you added and used Google fonts and displayed an image from the assets directory in your project.

Finally, you have seen how to describe onscreen content using the Semantics widget: this can help to improve the accessibility of your app.

In general, you are now familiar with the basics of creating user interfaces. The skills that you have acquired...