Lecture 09 · Mobile App Development
Make your app remember things and move between screens.
→ next · F fullscreen · N notes · T theme
Today
StatefulWidget and change the screen with setState()setState()Navigator.push and Navigator.popstatethe data a widget remembers right nowsetState()"I changed something, draw me again"routeone screen of the appNavigatorkeeps the stack of screensRecap · Lecture 08
of widgets: stateless and stateful
setState()change what is on the screen
move between screens
Login → Home, with the email
Two kinds
StatelessWidgetShows the data it is given. It never changes by itself.
StatefulWidgetHas data that can change while the app is running.
Compare
| StatelessWidget | StatefulWidget | |
|---|---|---|
| Its data | final, set once | can change |
| Classes you write | 1 | 2 (the widget + its State) |
build() runs again when… | its parent rebuilds | setState() is called (or its parent rebuilds) |
| Examples | Text, Icon, AppButton, HomePage | TextField, Switch, counter, LoginPage |
StatelessWidget (the default). Yes → StatefulWidget.Stateless
class Greeting extends StatelessWidget {
const Greeting({super.key, required this.name});
final String name;
@override
Widget build(BuildContext context) {
return Text('Hello, $name!', style: const TextStyle(fontSize: 24));
}
}
// Using it:
const Greeting(name: 'Ali'),
const Greeting(name: 'محمد'),
final.build() runswhen the parent rebuilds it, maybe with new data.'Ali' and 'محمد': same class, different name.name.Stateful
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int count = 0;
// build() lives here, in the State
}
CounterPagethe widgetThe settings card: small and final. Flutter can throw it away and make a new one.
_CounterPageStatethe StateThe memory box: keeps count and has build().
_name_ at the start of a name = private: only this file can use it.=>A short way to write { return …; }setState()
setState(): the counterclass _CounterPageState extends State<CounterPage> {
int count = 0;
body: Center(child: Text('$count', style: const TextStyle(fontSize: 64))),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
count++;
});
},
child: const Icon(Icons.add),
),
count lives in the State; count++ adds 1.setState() means: "I changed something, please draw me again."build() again, and the new number appears.FloatingActionButton is the round button that floats in the bottom-right corner.Break it on purpose
onPressed: () {
count++;
debugPrint('count is $count');
},
count is 1 count is 2 count is 3 …
setState(() { … }).true / false
bool isLiked = false;
@override
Widget build(BuildContext context) {
return IconButton(
iconSize: 48,
icon: Icon(
isLiked ? Icons.favorite : Icons.favorite_border,
color: isLiked ? Colors.red : Colors.grey,
),
onPressed: () {
setState(() {
isLiked = !isLiked;
});
},
);
boolholds true or falsea ? b : c"if a, use b, otherwise c"!isLiked"the opposite": true becomes false, false becomes trueGreetings that never change, and a heart that does.Tap: grey ↔ red
Navigation
1. The app starts
push2. A new plate on top
pop3. The top plate is removed
routeEach screen is called a route.NavigatorManages the stack of routes.pushPut a new screen on top.popTake the top screen off.Navigation · push
Navigator.push: open a new screenAppButton(
text: 'Login',
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage(email: email),
),
);
},
),
contextWhere we are in the widget tree, so Flutter finds the Navigator.MaterialPageRouteA route with the normal Android / iOS page animation.builderA function that builds the new screen.HomePage(email: email).Greeting receives name.Navigation · pop
Navigator.pop and the back arrowAppButton(
text: 'Logout',
onPressed: () {
Navigator.pop(context);
},
),
Removes the top screen; the screen below appears again.
Added automatically when there is a screen below. Tapping it also pops.
The Android back button / back gesture pops too.
← added for you
Build it · 1 of 3
const AppTextField({
super.key,
required this.label,
required this.icon,
this.isPassword = false,
this.onChanged, // new
});
final ValueChanged<String>? onChanged; // new
// inside build():
return TextField(
obscureText: isPassword,
onChanged: onChanged, // new: hand it to the TextField
ValueChanged<String>The type of a function like (value) { } that receives a String.?Optional, it can be empty (null). The Password field does not need it.VoidCallback from Lecture 8, but with an input.required, so every place that already uses AppTextField keeps working.Build it · 2 of 3
class _LoginPageState extends State<LoginPage> {
String email = '';
@override
Widget build(BuildContext context) {
// … same Scaffold as Lecture 8 …
AppTextField(
label: 'Email',
icon: Icons.email,
onChanged: (value) {
setState(() {
email = value;
});
},
),
LoginPage to lib/login_page.dart, click its name, press Ctrl + . (Mac: ⌘ + .) → Convert to StatefulWidget.String email = ''; to the State.onChanged, and remove its const.Navigator.push code from slide 12.email = 'ali@email.ly'
Build it · 3 of 3
class HomePage extends StatelessWidget {
const HomePage({super.key, required this.email});
final String email;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home')),
// … icon and 'Welcome!' title …
Text('You are logged in as $email', textAlign: TextAlign.center),
// … the Logout AppButton from slide 13 …
HomePage is stateless: it only shows the email it receives.1 Type the email
2 Tap Login
3 Home, with ←
Watch out
| The error or symptom | The fix |
|---|---|
| The method 'setState' isn't defined for the type 'CounterPage'. | It is a StatelessWidget. Convert it to a StatefulWidget. |
| Console shows the new value, the screen does not | Wrap the change in setState(() { … }); |
| The named parameter 'email' is required, but there's no corresponding argument. | Pass the data: HomePage(email: email) |
| The argument type 'HomePage' can't be assigned to the parameter type 'Route<Object?>'. | Wrap the page: MaterialPageRoute(builder: (context) => HomePage(email: email)) |
Navigator.pushReplacement (go to Home with no way back to Login) and named routes.Meme break
I changed the counter variable.
And you called setState, right?
…You called setState, right?Ask the class: why didn't the number on screen change?
setState(() { … }).Make your own: imgflip meme generator · about this meme
Wrap-up
StatefulWidget = 2 classes; the State keeps the data.setState(), or the screen will not update.Navigator.push adds, Navigator.pop removes.Practice at home
A refresh button in the AppBar sets the count back to 0.
Show the number of likes next to the heart.
Show a SnackBar instead of opening Home.
"Sign up" opens your Sign up page; the back arrow returns.
An eye icon that shows / hides the password.
ScaffoldMessenger.of(context).showSnackBar(…)