Created
January 21, 2021 19:17
-
-
Save sla-000/01f9e9d471c94d0c55f336f0e06d2b8e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| import 'package:flutter_redux/flutter_redux.dart'; | |
| import 'package:provider/provider.dart'; | |
| import 'package:redux/redux.dart'; | |
| // 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 Demo', | |
| store: store, | |
| )); | |
| } | |
| class FlutterReduxApp extends StatelessWidget { | |
| final Store<int> store; | |
| final String title; | |
| 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 new StoreProvider<int>( | |
| // Pass the store to the StoreProvider. Any ancestor `StoreConnector` | |
| // Widgets will find and use this value as the `Store`. | |
| store: store, | |
| child: new MaterialApp( | |
| theme: new ThemeData.dark(), | |
| title: title, | |
| home: new Scaffold( | |
| appBar: new AppBar( | |
| title: new Text(title), | |
| ), | |
| body: Provider<Store<int>>( | |
| create: (_) => store, | |
| child: new Center( | |
| child: new Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: [ | |
| new Text( | |
| 'You have pushed the button this many times:', | |
| ), | |
| // Connect the Store to a Text Widget that renders the current | |
| // count. | |
| // | |
| // We'll wrap the Text Widget in a `StoreConnector` Widget. The | |
| // `StoreConnector` will find the `Store` from the nearest | |
| // `StoreProvider` ancestor, convert it into a String of the | |
| // latest count, and pass that String to the `builder` function | |
| // as the `count`. | |
| // | |
| // Every time the button is tapped, an action is dispatched and | |
| // run through the reducer. After the reducer updates the state, | |
| // the Widget will be automatically rebuilt with the latest | |
| // count. No need to manually manage subscriptions or Streams! | |
| CounterValueWorking(), | |
| CounterValueBroken(), | |
| ], | |
| ), | |
| ), | |
| ), | |
| // Connect the Store to a FloatingActionButton. In this case, we'll | |
| // use the Store to build a callback that with dispatch an Increment | |
| // Action. | |
| // | |
| // Then, we'll pass this callback to the button's `onPressed` handler. | |
| 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), | |
| ); | |
| }, | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class CounterValueWorking extends StatelessWidget { | |
| const CounterValueWorking({ | |
| Key key, | |
| }) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return new StoreConnector<int, String>( | |
| converter: (store) => store.state.toString(), | |
| builder: (context, count) { | |
| return new Text( | |
| count, | |
| style: Theme.of(context).textTheme.display1, | |
| ); | |
| }, | |
| ); | |
| } | |
| } | |
| class CounterValueBroken extends StatelessWidget { | |
| const CounterValueBroken({ | |
| Key key, | |
| }) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| context.watch(); | |
| final store = Provider.of<Store<int>>(context); | |
| return Text( | |
| '${store.state}', | |
| style: Theme.of(context).textTheme.display1, | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment