1- // Copyright 2018 The Chromium Authors. All rights reserved.
1+ // Copyright 2019 The Chromium Authors. All rights reserved.
22// Use of this source code is governed by a BSD-style license that can be
33// found in the LICENSE file.
44
55import 'package:flutter/material.dart' ;
6- import 'package:scoped_model/scoped_model .dart' ;
6+ import 'package:provider/provider .dart' ;
77
88void main () => runApp (MyApp ());
99
10- class IncrementValueModel extends Model {
11- IncrementValueModel ( this ._incrementValue) : super ( );
10+ class Incrementer with ChangeNotifier {
11+ Incrementer ([ this ._incrementValue = 1 ] );
1212 int _incrementValue;
1313 int _counter = 0 ;
1414
15- int get incrementValue => _incrementValue;
1615 int get counter => _counter;
1716
18- void updateIncrementValue (int value) {
17+ int get incrementValue => _incrementValue;
18+ set incrementValue (int value) {
1919 _incrementValue = value;
2020 notifyListeners ();
2121 }
@@ -24,22 +24,15 @@ class IncrementValueModel extends Model {
2424 _counter += _incrementValue;
2525 notifyListeners ();
2626 }
27-
28- /// Wraps [ModelFinder.of] for this [Model]
29- static IncrementValueModel of (BuildContext context) =>
30- ModelFinder <IncrementValueModel >().of (context);
3127}
3228
3329class MyApp extends StatelessWidget {
3430 @override
3531 Widget build (BuildContext context) {
36- return ScopedModel (
37- model : IncrementValueModel ( 1 ),
32+ return ChangeNotifierProvider (
33+ notifier : Incrementer ( ),
3834 child: MaterialApp (
3935 title: 'Flutter Demo' ,
40- theme: ThemeData (
41- primarySwatch: Colors .blue,
42- ),
4336 home: MyHomePage (title: 'Modal Bottom Sheet Demo' ),
4437 ),
4538 );
@@ -63,31 +56,17 @@ class MyHomePage extends StatelessWidget {
6356 Text (
6457 'You have pushed the button this many times:' ,
6558 ),
66- ScopedModelDescendant < IncrementValueModel >(
67- builder: (context, _, model ) => Text (
68- '${model .counter }' ,
59+ Consumer < Incrementer >(
60+ builder: (context, value ) => Text (
61+ '${value .counter }' ,
6962 style: Theme .of (context).textTheme.display1,
7063 ),
7164 ),
7265 ],
7366 ),
7467 ),
75- // Below is an alternative way of accessing the model in instances
76- // where the widget doesn't care when the model is updated
77- // (i.e. the widget doesn't rebuild when the model's data changes).
78- //
79- // Another way of doing this is using the rebuildOnChange flag
80- // e.g.
81- // floatingActionButton: ScopedModelDescendant<IncrementValueModel>(
82- // rebuildOnChange: false,
83- // builder: (context, _, model) => FloatingActionButton(
84- // onPressed: model.increment,
85- // tooltip: 'Increment',
86- // child: Icon(Icons.add),
87- // ),
88- // ),
8968 floatingActionButton: FloatingActionButton (
90- onPressed: () => IncrementValueModel .of (context).increment (),
69+ onPressed: () => Provider .of < Incrementer > (context).increment (),
9170 tooltip: 'Increment' ,
9271 child: Icon (Icons .add),
9372 ),
@@ -100,38 +79,30 @@ class MyHomePage extends StatelessWidget {
10079class BottomBar extends StatelessWidget {
10180 @override
10281 Widget build (BuildContext context) {
103- return ScopedModelDescendant <IncrementValueModel >(
104- builder: (context, _, model) => BottomAppBar (
105- color: Theme .of (context).primaryColor,
106- child: Row (
107- children: [
108- Padding (
109- padding: const EdgeInsets .only (left: 20.0 ),
110- child: IconButton (
111- icon: Icon (Icons .settings,
112- color: Theme .of (context).canvasColor),
113- onPressed: () => _modalBottomSheet (context),
114- ),
115- ),
116- ],
117- )),
82+ return BottomAppBar (
83+ color: Theme .of (context).primaryColor,
84+ child: Row (
85+ children: [
86+ Padding (
87+ padding: const EdgeInsets .only (left: 20.0 ),
88+ child: IconButton (
89+ icon: Icon (Icons .settings, color: Theme .of (context).canvasColor),
90+ onPressed: () => showModalBottomSheet (
91+ context: context,
92+ builder: (_) => CustomBottomSheet (),
93+ ),
94+ ),
95+ ),
96+ ],
97+ ),
11898 );
11999 }
120100}
121101
122- void _modalBottomSheet (BuildContext context) {
123- showModalBottomSheet (
124- context: context,
125- builder: (_) => CustomBottomSheet (),
126- // maxHeightRatio: 0.4,
127- );
128- }
129-
130102class CustomBottomSheet extends StatelessWidget {
131103 @override
132104 Widget build (BuildContext context) {
133105 return Container (
134- // height: 600.0,
135106 child: Column (
136107 mainAxisAlignment: MainAxisAlignment .start,
137108 crossAxisAlignment: CrossAxisAlignment .stretch,
@@ -144,11 +115,7 @@ class CustomBottomSheet extends StatelessWidget {
144115 ),
145116 ),
146117 Padding (
147- padding: const EdgeInsets .only (
148- top: 50.0 ,
149- left: 20.0 ,
150- right: 20.0 ,
151- ),
118+ padding: const EdgeInsets .only (top: 50.0 , left: 20.0 , right: 20.0 ),
152119 child: Column (
153120 crossAxisAlignment: CrossAxisAlignment .start,
154121 children: [
@@ -167,24 +134,23 @@ class CustomBottomSheet extends StatelessWidget {
167134class CustomSlider extends StatelessWidget {
168135 @override
169136 Widget build (BuildContext context) {
170- return ScopedModelDescendant <IncrementValueModel >(
171- builder: (context, _, model) {
137+ return Consumer <Incrementer >(builder: (context, incrementer) {
172138 return Row (
173139 children: [
174140 Expanded (
175141 child: Slider (
176- value: model .incrementValue.toDouble (),
142+ value: incrementer .incrementValue.toDouble (),
177143 min: 1.0 ,
178144 max: 10.0 ,
179145 label: 'Increment Step' ,
180146 onChanged: (double value) =>
181- model. updateIncrementValue ( value.toInt () ),
147+ incrementer.incrementValue = value.toInt (),
182148 ),
183149 ),
184150 Padding (
185151 padding: const EdgeInsets .only (left: 10.0 ),
186- child:
187- Container ( width: 30.0 , child: Text ('${model .incrementValue }' )),
152+ child: Container (
153+ width: 30.0 , child: Text ('${incrementer .incrementValue }' )),
188154 ),
189155 ],
190156 );
0 commit comments