Working with TextFields

Together with buttons, another extremely common form of user interaction is the text field. There comes a point in most apps where your users need to type something; for example, a form where users type in their username and password.

Because the text is often related to the concept of forms, Flutter also has a subclass of TextField called TextFormField, which adds functionality for multiple text fields to work together.

In this recipe, we're going to create a login form for our stopwatch app so that we know which runner we're timing.

Getting ready

Once again, we're going to continue with the StopWatch project. You should have completed the previous recipes in this chapter before following along with this one.

In the main.dart file, in the home property of MaterialApp, add a call to the LoginScreen class. We will be creating this in this recipe:

 home: LoginScreen(),

How to do it...

We're going to take a small break from the stopwatch for...

Navigating to the next screen

So far, all our examples have taken place on a single screen. In most real-world projects, you might be managing several screens, each with their own paths that can be pushed and popped onto the screen.

Flutter, and more specifically MaterialApp, uses a class called Navigator to manage your app's screens. Screens are abstracted into a concept called Routes, which contain both the widget we want to show and how we want to animate them on the screen. Navigator also keeps a full history of your routes so that you can return to the previous screens easily.

In this recipe, we're going to link LoginScreen and StopWatch so that LoginScreen actually logs you in.

How to do it...

Let's start linking the two screens in the app:

• Start by engaging in one the most enjoyable activities for a developer – deleting code! Remove the loggedIn property and all the parts of the code where it's referenced. We're also no longer going to need the...

Showing dialogs on the screen

Dialogs, or popups, are used when you want to give a message to your users that needs their attention. This ranges from telling the user about some error that occurred or asking them to perform some action before continuing, or even giving them a warning.

As alerts require some feedback from the user, you should use them for important information prompts or for actions that require immediate attention: in other words, only when really necessary.

The following are the default alerts for Android and iOS:

In this recipe, we're going to create a platform-aware alert and use it to show a prompt when the user stops the stopwatch.

Getting ready

Once again, we're going to continue with the StopWatch project. You should have completed the previous recipes in this chapter before following along with this one.

How to do it...

We will work with a new file in our project, called platform_alert.dart. Let's get started:

1. Open this new file and create...

Presenting bottom sheets

There are times where you need to present modal information, but a dialog just comes on too strong. Fortunately, there are quite a few alternative conventions for putting information on the screen that do not necessarily require action from users. Bottom sheets are one of the "gentler" alternatives to dialogs. With a bottom sheet, information slides out from the bottom of the screen, where it can be swiped down by the user if it displeases them. Also, unlike alerts, bottom sheets do not block the main interface, allowing users to conveniently ignore these messages.

In this final recipe for the stopwatch app, we're going to replace the dialog alert with a bottom sheet and animate it away after 5 seconds.

Getting ready

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

How to do it...

1. Open stopwatch.dart to get started:
2. The bottom sheet API is not dramatically different from dialogs. The global...

Handling large datasets with list builders

There is an interesting trick that mobile apps use when they need to render lists of data that can potentially contain more entries than your device has memory to display. This was especially critical in the early days of mobile app development, when phones were a lot less powerful than they are today. Imagine that you had to create a contacts app, where your user could potentially have hundreds and hundreds of scrollable contacts. If you put them all in a single ListView and asked Flutter to create all of these widgets, there would be a point where your app could run out of memory, slow down, and even crash.

Take a look at the contacts app on your phone and scroll up and down really fast. These apps don’t show any delay while scrolling, and they certainly aren’t in any danger of crashing because of the amount of data. What’s the secret? If you look carefully at your app, you’ll see that only so many items...

Working with TextFields

Together with buttons, another extremely common form of user interaction is the text field. There comes a point in most apps where your users need to type something; for example, a form where users type in their username and password.

Because the text is often related to the concept of forms, Flutter also has a subclass of TextField called TextFormField, which adds functionality for multiple text fields to work together.

In this recipe, we’re going to create a login form for our stopwatch app so that we know which runner we’re timing.

Getting ready

Once again, we’re going to continue with the StopWatch project. You should have completed the previous recipes in this chapter before following along with this one.

In the main.dart file, in the home property of MaterialApp, add a call to the LoginScreen class. We will be creating this in this recipe:

 home: LoginScreen(),

How to do it...

We’re going to...

Navigating to the next screen

So far, all our examples have taken place on a single screen. In most real-world projects, you might be managing several screens, each with their own paths that can be pushed and popped onto the screen.

Flutter, and more specifically MaterialApp, uses a class called Navigator to manage your app’s screens. Screens are abstracted into a concept called Routes, which contain both information about the widget we want to show and how we want to animate it on the screen. Navigator also keeps a full history of your routes so that you can return to the previous screens easily.

In this recipe, we’re going to link LoginScreen and StopWatch so that LoginScreen actually logs you in.

How to do it...

Let’s start linking the two screens in the app:

1. Start by engaging in one the most enjoyable activities for a developer—deleting code! Remove the loggedIn property and all the parts of the code where it’s referenced...

Showing dialogs on the screen

Dialogs, or popups, are used when you want to give a message to your users that needs their attention. This ranges from telling the user about some error that occurred or asking them to perform some action before continuing, or even giving them a warning.

As alerts require some feedback from the user, you should use them for important information prompts or for actions that require immediate attention: in other words, only when really necessary.

The following are the default alerts for Android and iOS:

Figure 6.10: Alerts on Android and iOS

In this recipe, we’re going to create a platform-aware alert and use it to show a prompt when the user stops the stopwatch.

Getting ready

Once again, we’re going to continue with the StopWatch project. You should have completed the previous recipes in this chapter before following along with this one.

How to do it...

We will work with a new file in our...

Presenting bottom sheets

There are times where you need to present modal information, but a dialog just comes on too strong. Fortunately, there are quite a few alternative conventions for putting information on the screen that do not necessarily require action from users. Bottom sheets are one of the “gentler” alternatives to dialogs, together with Toasts. With a bottom sheet, information slides out from the bottom of the screen, where it can be swiped down by the user if it displeases them. Also, unlike alerts, bottom sheets do not block the main interface, allowing users to conveniently ignore these messages.

In this final recipe for the stopwatch app, we’re going to replace the dialog alert with a bottom sheet and animate it away after 5 seconds.

Getting ready

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

How to do it...

Open stopwatch.dart to get started:

1. The bottom sheet...