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
