Understanding ScopedModel and states in flutter - flutter

Question

I hope someone can help me understand ScopedModel in flutter
I have a simple project where when I change a models value, a page wrapper will redirect me to some other page.
In this sample code below, all I want is when I tap login button in the login page, I want the pageWrapper to redirect me to HomePage().
I do notice that after clicking the login button and then I click on the hot reload, I get redirected to the HomePage. which tells me that the model has been updated. Its just that the PageWrapper did not redraw. If thats the case, what should I do so the PageWrapper will redraw when a change has occurred?
Here is a sample code
main.dart
void main() => runApp(MyApp(
model: UserInfoModel(),
));
class MyApp extends StatelessWidget {
final UserInfoModel model;
const MyApp({Key key, #required this.model}): super(key: key);
#override
Widget build(BuildContext context) {
return ScopedModel<UserInfoModel>(
model: model,
child: MaterialApp(
title: 'scoped model demo',
home: PageWrapper(),
),
);
}
}
page_wrapper.dart
class PageWrapper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ScopedModelDescendant<UserInfoModel>(
builder: (context, child, userInfo){
if (userInfo.isLoggedIn){
return Home();
}else{
return Login();
}
}
);
}
}
login.dart
class Login extends StatefulWidget {
#override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
#override
Widget build(BuildContext context) {
return ScopedModelDescendant<UserInfoModel>(
builder: (context, child, userInfoModel){
return Scaffold(
appBar: AppBar(
title: Text("Login"),
),
body: Container(
child: Center(
child: FlatButton.icon(onPressed: (){
userInfoModel.isLoggedIn=true;
}, icon: Icon(Icons.person,size: 120,),
label: Text("Login"))
),
),
);
});
}
}
home.dart
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: Container(
child: Center(
child: Text("you're home"),
),
),
);
}
}
user_info_model.dart
class UserInfoModel extends Model{
String firstName;
String lastName;
bool isLoggedIn=false;
UserInfoModel({
this.firstName,
this.lastName
});
}

Answer 1

You can copy paste run full code below
Step 1: You can interact UserInfoModel with get and set , you can see code below
Step 2: You need notifyListeners()
code snippet
if (userInfo.isLoggedIn) {
return Home();
...
onPressed: () {
userInfoModel.isLoggedIn = true;
},
class UserInfoModel extends Model {
String firstName;
String lastName;
bool _isLoggedIn = false;
UserInfoModel({this.firstName, this.lastName});
bool get isLoggedIn => _isLoggedIn;
set isLoggedIn(bool newSetting) {
_isLoggedIn = newSetting;
notifyListeners();
}
}
working demo
full code
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
void main() => runApp(MyApp(
model: UserInfoModel(),
));
class MyApp extends StatelessWidget {
final UserInfoModel model;
const MyApp({Key key, #required this.model}) : super(key: key);
#override
Widget build(BuildContext context) {
return ScopedModel<UserInfoModel>(
model: model,
child: MaterialApp(
title: 'scoped model demo',
home: PageWrapper(),
),
);
}
}
class PageWrapper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ScopedModelDescendant<UserInfoModel>(
builder: (context, child, userInfo) {
if (userInfo.isLoggedIn) {
return Home();
} else {
return Login();
}
});
}
}
class Login extends StatefulWidget {
#override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
#override
Widget build(BuildContext context) {
return ScopedModelDescendant<UserInfoModel>(
builder: (context, child, userInfoModel) {
return Scaffold(
appBar: AppBar(
title: Text("Login"),
),
body: Container(
child: Center(
child: FlatButton.icon(
onPressed: () {
userInfoModel.isLoggedIn = true;
},
icon: Icon(
Icons.person,
size: 120,
),
label: Text("Login"))),
),
);
});
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: Container(
child: Center(
child: Text("you're home"),
),
),
);
}
}
class UserInfoModel extends Model {
String firstName;
String lastName;
bool _isLoggedIn = false;
UserInfoModel({this.firstName, this.lastName});
bool get isLoggedIn => _isLoggedIn;
set isLoggedIn(bool newSetting) {
_isLoggedIn = newSetting;
notifyListeners();
}
}