Two ChangeNotifierProvider on two different pages - flutter

Question

How can I provide two ChangeNotifierProvider for different pages.
The first page works fine but when I click button and switch to the other side the Provider is not working properly and show me this error:
Error: Could not find the correct Provider above this SecondPage Widget. My code:
Main:
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => UserListViewModel(),
),
ChangeNotifierProvider(
create: (context) => AnimalViewModel(),
)
],
child: UserListPage(),
)
);
}
}
UserListPage:
class UserListPage extends StatefulWidget {
#override
_UserListPageState createState() => _UserListPageState();
}
class _UserListPageState extends State<UserListPage> {
#override
void initState() {
super.initState();
Provider.of<UserListViewModel>(context, listen: false).fetchUsers("");
}
#override
Widget build(BuildContext context) {
final vm = Provider.of<UserListViewModel>(context);
return Scaffold(
appBar: AppBar(
title: Text("Movies")
),
body: Container(
padding: EdgeInsets.all(10),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10)
),
child: RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.all(10.0),
child:
const Text('Gradient Button', style: TextStyle(fontSize: 20)),
),
),
),
Expanded(
child: UserList(users: vm.users))
])
)
);
}
}
SecondPage:
class _SecondPageState extends State<SecondPage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
final vm = Provider.of<AnimalViewModel>(context);
return Scaffold(
appBar: AppBar(
title: Text("Animals")
),
body: Container(
padding: EdgeInsets.all(10),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10)
),
child: RaisedButton(
onPressed: () {
vm.setName = 'BumBum';
},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.all(10.0),
child:
const Text('Gradient Button', style: TextStyle(fontSize: 20)),
),
),
),
Expanded(
child: Text(vm.getName))
])
)
);
}
}

Answer 1

You need to move your MultiProvider above MaterialApp. Like this:
MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => UserListViewModel(),
),
ChangeNotifierProvider(
create: (context) => AnimalViewModel(),
)
],
child: MaterialApp(
home: UserListPage(),
),
),
The reason you're getting the error is the home widget is a route and that's what MultiProvider wraps. So when you navigate from that route to SecondPage, that route is gone and it can not access MultiProvider