Flutter 全局状态管理 redux & scoped_model

Flutter 全局状态管理 redux & scoped_model

flutter_redux

// One simple action: Increment
enum Actions {
Increment
}

// The reducer, which takes the previous count and increments it in response
// to an Increment action.
int counterReducer(int state,dynamic action){
if(action == Actions.Increment){
 return state +1;
}
return state;
}

void main(){
// Create your store as a final variable in a base Widget. This works better
// with Hot Reload than creating it directly in the `build` function.
final store = new Store<int>(counterReducer,initialState: 0);

runApp(new FlutterReduxApp(
 title: 'Flutter Redux App',
 store: store,
));
}

class FlutterReduxApp extends StatelessWidget {
final String title;
final Store<int> store;
FlutterReduxApp({Key key,this.store,this.title}):super(key:key);

@override
Widget build(BuildContext context) {
 // The StoreProvider should wrap your MaterialApp or WidgetsApp. This will
 // ensure all routes have access to the store.
 return StoreProvider<int>(
   store: store,
   child: new MaterialApp(
     theme: new ThemeData.dark(),
     title: title,
     home: ScaffoldDemo(title,store),
   ),
 );
}
}


class ScaffoldDemo extends StatelessWidget {
final String title;
final Store<int> store;
ScaffoldDemo(this.title,this.store);



@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(title: Text(title),),
   body: Center(
     child: Column(
       children: <Widget>[
         Text('you have click the button many times:'),
         StoreConnector<int,String>(
           converter: (store)=>store.state.toString(),
           builder: (context,count){
             return Text(
               count,
               style: Theme.of(context).textTheme.display1,
             );
           },
         )
       ],
     ),
   ),
   floatingActionButton: new StoreConnector<int, VoidCallback>(
     converter: (store) {
       // Return a `VoidCallback`, which is a fancy name for a function
       // with no parameters. It only dispatches an Increment action.
       return () => store.dispatch(Actions.Increment);
     },
     builder: (context, callback) {
       return new FloatingActionButton(
         // Attach the `callback` to the `onPressed` attribute
         onPressed: callback,
         tooltip: 'Increment',
         child: new Icon(Icons.add),
       );
     },
   ),
 );
}
}

scoped_model

void main(){
runApp(MyApp(
 model:CounterModel(),
));
}

class MyApp extends StatelessWidget {
final CounterModel model;
MyApp({Key key,@required this.model}):super(key:key);

@override
Widget build(BuildContext context) {
 return ScopedModel(
   model: model,
   child: MaterialApp(
     title: 'Scoped Model Demo',
     home: CountPage(),
   ),
 );
}
}

class CountPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: Text('Scoped Model'),
     actions: <Widget>[
       IconButton(
         tooltip: 'to result',
         icon: Icon(Icons.home),
         onPressed: (){
           Navigator.push(context, MaterialPageRoute(builder: (context)=>ResultPage()));
         },
       )
     ],
   ),
   body: Center(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         Text('你都点击'),
         ScopedModelDescendant<CounterModel>(
           builder: (context,child,model){
             return Text('${model.counter.toString()}次了',
               style: TextStyle(
                 color: Colors.red,
                 fontSize: 33.0
               ),
             );
           },
         )
       ],
     ),
   ),
   floatingActionButton: ScopedModelDescendant<CounterModel>(
     builder: (context,child,model){
       return FloatingActionButton(
         onPressed: model.increment,
         tooltip: 'add',
         child: Icon(Icons.add),
       );
     }
   ),
 );
}
}

class ResultPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(title: Text('结果页面'),),
   body: Column(
     mainAxisAlignment: MainAxisAlignment.center,
     crossAxisAlignment: CrossAxisAlignment.center,
     children: <Widget>[
       Text('共享的state：'),
       ScopedModelDescendant<CounterModel>(
         builder: (context,child,model){
           return Text('${model.counter.toString()}',
             style: TextStyle(
                 color: Colors.red,
                 fontSize: 33.0
             ),
           );
         },
       )
     ],
   ),
 );
}
}