Mobile Application Development

Duration: 65 min High School Grades: 9 - 12 CCSS, NGSS

Week 9
Chapter 5 – Multi-Screen UIs (Navigators & Routes)
&
Chapter 6 – Basic State Management
Book: Flutter Cookbook -
Over 100 proven techniques and solutions for app
development with Flutter 2.2 and Dart
Dr. Yasir Faheem
Associate Professor, NUST-SEECS
https://www.yasirfaheem.com/ 1
Disclaimer

These lecture slides have been prepared using the content available on the official websites of
Dart, Flutter, and other online resources.

Primarily, this lecture has been prepared from Chapters numbered 5 & 6 of the textbook titled,
“Flutter Cookbook Over 100 proven techniques and solutions for app development with Flutter 2.2
and Dart” by Harrington

All the copyrights are reserved with the original content creators.

The purpose of these slides is to only teach the concepts to students.

2
Recap

Stateful widgets – Stopwatch Application

 Adding state to your app
 initState
 build (required)
 dispose

 Interacting with buttons

 Making it scroll

3
Today’s Lecture

Chapter 5 – Adding Interactivity and

Navigation to Your App
 Handling large datasets with list builders

 Working with TextFields

 Navigating to the next screen

 Invoking navigation routes by name

 Showing dialogs on the screen

 Presenting bottom sheets

4
Part A

Chapter 5 – Adding Interactivity and

Navigation to Your App
 Handling large datasets with list builders

 Working with TextFields

 Navigating to the next screen

 Invoking navigation routes by name

 Showing dialogs on the screen

 Presenting bottom sheets

5
Handling large datasets with list builders

Apps with 100s or 1000s of scrollable contents in listView

Phone out of memory problem – app slows down or crash

Contacts app doesn’t present delay

What's the secret?

 Only a few items can fit on the screen at once
 Irrespective of the list size
 Recycle these views.
 When a widget moves off screen, why not reuse it with the new data?

6
Replace ListView widget with its varian ListView.builder

7
ScrollViews can get too big,

A good idea is to show the users their position in the list.

Wrap ListView in a Scrollbar widget.

Let us make listView.builder scroll to the bottom of the list everytime the lap button is tapped

8
Run the App – Checkpoint 2

 How ListView.builder handles large datasets?

9
How ListView.builder handles large datasets?

To build an optimized ListView with its builder constructor

 We need to tell Flutter how large the list is via the itemCount property.
 Otherwise, Flutter thinks the list is infinitely long

Secret to scrolling performance is found in the ItemBuilder closure

Previously, we added a list of know children to ListView

 Forces to create and maintain a list of all the widgets
 Widgets not expensive
 However, RenderObjects properties are

ItemBuilder enables deferred rendering.

 We no longer provide Flutter a list of widgets
 We wait for Flutter to use what it needs and only creating widgets for a subset of our list

10
How ListView.builder handles large datasets?

Flutter continuously calls the ItemBuilder function with the appropriate index.

When widgets move off the screen, Flutter removes them from the tree, freeing up precious
memory.

Even if our list is thousands of entries long

 The size of the viewport is not going to change,

We are only going to need the same fixed number of visible entries at a time.

11
Working with TextFields

Most apps require users to enter text e.g. a form

 Typing name and password

Flutter has a sub-class of TextField called TextFormField.

TextFormField adds functionality for multiple text fields to work together.

Let’s create a login form for our stopwatch app so that we know which runner we're timing.

12
login_screen.dart

Generate stateful widget

LoginScreen

The State class will automatically be named _LoginScreenState

login screen needs to know whether the user is logged in to show

the appropriate widget tree.

handle this by having a boolean property called loggedIn and

forking the widget tree accordingly

13
login_screen.dart

14
login_screen.dart

15
login_screen.dart

16
login_screen.dart

 Run the App –Checkpoint 3

 What should we see?

17
login_screen.dart

18
login_screen.dart

Now let’s add email address TextFormField

19
login_screen.dart

20
login_screen.dart

`

 Run the App –Checkpoint 3

 What should we see?

21
Navigating to the next screen

MaterialApp, uses a class called Navigator to manage your app's screens.

Screens are abstracted into a concept called Routes

 Routes contain
 the widget we want to show
 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.

22
Navigating to the next screen

23
Navigating to the next screen

24
Navigating to the next screen

25
Navigating to the next screen

26
Navigating to the next screen

27
How it Works?

Navigator is a component of both MaterialApp and CupertinoApp.

Accessing this object is yet another example of the of-context pattern.

Internally, Navigators function as a stack.

 Routes can be pushed onto the stack and popped off the stack.

28
How Navigator Works?

Navigator is a component of both MaterialApp and CupertinoApp.

Accessing this object is yet another example of the of-context pattern.

Internally, Navigators function as a stack.

 Routes can be pushed onto the stack and popped off the stack.

29
How MaterialPageRoute Works?

We also used the MaterialPageRoute class to represent our routes.

This object will create a platform-aware transition between the two screens.
 On iOS, it will push onto the screen from right.
 On Android, it will pop onto the screen from the bottom.

30
How MaterialPageRoute Works?

31
Invoking navigation routes by name

In Flutter, you can use named routes.

We can assign a textual name to screens

We simply invoke them as if we were just going to another page on a website.

32
Invoking navigation routes by name

33
Invoking navigation routes by name

34
How Routes work?

35
How Routes work?

36
How Routes work?

37
Conclusion

In this chapter we learnt how to use :

 TextFormFields
 Diplaying Large Datasets via ListView.Builder
 Navigation between multiple screens

38