ScopedModel - how to pass more than one model - flutter

Question

In sample we pass the single model like this
return ScopedModel<CounterModel>(
model: CounterModel(), // only one model here
child: MaterialApp(
title: 'Scoped Model Demo',
home: CounterHome('Scoped Model Demo'),
),
);
How to pass some models instead of single model? So that to use them later this way
Widget build(BuildContext context) {
final username =
ScopedModel.of<UserModel>(context, rebuildOnChange: true).username;
final counter =
ScopedModel.of<CounterModel>(context, rebuildOnChange: true).counter;
return Text(...);
}

Answer 1

You can copy paste and run the full code below.
You can reference this https://newcodingera.com/scoped-model-in-flutter/
You can pass your three models and wrap them nested
Code snippet
void main() {
runApp(MyApp(
counterModel: CounterModel(),
userModel: UserModel('Brian'),
dataModel: DataModel('this is test'),
));
}
class MyApp extends StatelessWidget {
final CounterModel counterModel;
final UserModel userModel;
final DataModel dataModel;
const MyApp({
Key key,
#required this.counterModel,
#required this.userModel,
#required this.dataModel,
}) : super(key: key);
#override
Widget build(BuildContext context) {
// At the top level of our app, we'll, create a ScopedModel Widget. This
// will provide the CounterModel to all children in the app that request it
// using a ScopedModelDescendant.
return ScopedModel<DataModel>(
model: dataModel,
child: ScopedModel<UserModel>(
model: userModel,
child: ScopedModel<CounterModel>(
model: counterModel,
Working demo
Full code
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
void main() {
runApp(MyApp(
counterModel: CounterModel(),
userModel: UserModel('Brian'),
dataModel: DataModel('this is test'),
));
}
class MyApp extends StatelessWidget {
final CounterModel counterModel;
final UserModel userModel;
final DataModel dataModel;
const MyApp({
Key key,
#required this.counterModel,
#required this.userModel,
#required this.dataModel,
}) : super(key: key);
#override
Widget build(BuildContext context) {
// At the top level of our app, we'll, create a ScopedModel Widget. This
// will provide the CounterModel to all children in the app that request it
// using a ScopedModelDescendant.
return ScopedModel<DataModel>(
model: dataModel,
child: ScopedModel<UserModel>(
model: userModel,
child: ScopedModel<CounterModel>(
model: counterModel,
child: MaterialApp(
title: 'Scoped Model Demo',
home: CounterHome('Scoped Model Demo'),
),
),
),
);
}
}
// Start by creating a class that has a counter and a method to increment it.
//
// Note: It must extend from Model.
class CounterModel extends Model {
int _counter = 0;
int get counter => _counter;
void increment() {
// First, increment the counter
_counter++;
// Then notify all the listeners.
notifyListeners();
}
}
class UserModel extends Model {
String _username;
UserModel(String username) : _username = username;
String get username => _username;
set username(String newName) {
_username = newName;
notifyListeners();
}
}
class DataModel extends Model {
String _data;
DataModel(String data) : _data = data;
String get data => _data;
set data(String newData) {
_data = newData;
notifyListeners();
}
}
class CounterHome extends StatelessWidget {
final String title;
CounterHome(this.title);
#override
Widget build(BuildContext context) {
final counter =
ScopedModel.of<CounterModel>(context, rebuildOnChange: true).counter;
final userModel = ScopedModel.of<UserModel>(context, rebuildOnChange: true);
final dataModel = ScopedModel.of<DataModel>(context, rebuildOnChange: true);
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('${userModel.username} pushed the button this many times:'),
Text('${dataModel.data} From data model'),
// Create a ScopedModelDescendant. This widget will get the
// CounterModel from the nearest parent ScopedModel<CounterModel>.
// It will hand that CounterModel to our builder method, and
// rebuild any time the CounterModel changes (i.e. after we
// `notifyListeners` in the Model).
Text('$counter', style: Theme.of(context).textTheme.display1),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text('Change Username'),
onPressed: () {
userModel.username = 'Suzanne';
},
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text('Change Data'),
onPressed: () {
dataModel.data = 'data changed';
},
),
)
],
),
),
// Use the ScopedModelDescendant again in order to use the increment
// method from the CounterModel
floatingActionButton: ScopedModelDescendant<CounterModel>(
builder: (context, child, model) {
return FloatingActionButton(
onPressed: model.increment,
tooltip: 'Increment',
child: Icon(Icons.add),
);
},
),
);
}
}