A set of utilities that allow you to easily pass a data Model from a parent Widget down to it's descendants. In addition, it also re-renders all of the children who use the model when the model is updated.
Besides a couple of tests and a bit of documentation, this is not my work / idea. It's a simple extraction of the Model classes from Fuchsia's core Widgets, presented as a standalone Flutter Plugin for independent use so we can evaluate this architecture pattern more easily as a community.
Let's demo the basic usage with the all-time favorite: A counter example!
// Start by creating a class that holds some view the app's state. In
// our example, we'll have a simple counter that starts at 0 can be
// incremented.
//
// 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();
}
}
// Create our App, which will provide the `CounterModel` to
// all children that require it!
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// First, create a `ScopedModel` widget. This will provide
// the `model` to the children that request it.
return new ScopedModel<CounterModel>(
model: new CounterModel(),
child: new Column(children: [
// Create a ScopedModelDescendant. This widget will get the
// CounterModel from the nearest ScopedModel<CounterModel>.
// It will hand that model to our builder method, and rebuild
// any time the CounterModel changes (i.e. after we
// `notifyListeners` in the Model).
new ScopedModelDescendant<CounterModel>(
builder: (context, child, model) => new Text(
model.counter.toString()),
),
new Text("Another widget that doesn't depend on the CounterModel")
])
);
}
}
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@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 new ScopedModel<CounterModel>(
model: new CounterModel(),
child: new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.green,
),
home: new 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 CounterHome extends StatelessWidget {
final String title;
CounterHome(this.title);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
// 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).
new ScopedModelDescendant<CounterModel>(
builder: (context, child, model) => new Text(
model.counter.toString(),
style: Theme.of(context).textTheme.display1),
),
],
),
),
// Use the ScopedModelDescendant again in order to use the increment
// method from the CounterModel
floatingActionButton: new ScopedModelDescendant<CounterModel>(
builder: (context, child, model) => new FloatingActionButton(
onPressed: model.increment,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
),
);
}
}
Add this to your package's pubspec.yaml file:
dependencies:
scoped_model: ^0.1.1
You can install packages from the command line:
with pub:
$ pub get
with Flutter:
$ flutter packages get
Alternatively, your editor might support pub get
or flutter packages get
.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:scoped_model/scoped_model.dart';
Version | Uploaded | Documentation | Archive |
---|---|---|---|
1.0.1 | Nov 29, 2018 |
|
|
1.0.0 | Nov 29, 2018 |
|
|
0.3.0 | Aug 17, 2018 |
|
|
0.2.0 | Jan 4, 2018 |
|
|
0.1.1 | Nov 25, 2017 |
|
|
0.1.0 | Aug 17, 2017 |
|
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
100
|
Health:
Code health derived from static analysis.
[more]
|
--
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
--
|
Overall:
Weighted score of the above.
[more]
|
50
|
The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.
Support Dart 2 in pubspec.yaml
.
The SDK constraint in pubspec.yaml
doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.
Make sure dartdoc
successfully runs on your package's source files. (-10 points)
Dependencies were not resolved.