Flutter + Redux — How to make Shopping List App?

Hi everyone! In this article I’d like to show you how to create application using . If you don’t know what Flutter is, I encourage you to read my article . However, if you know what Flutter is and you’d like to create an application that is — then keep going with reading! Flutter Redux Flutter — 5 reasons why you may love it well designed, easy to test and has very predictable behaviour What is Redux? Firstly, let’s start with explaining what is. is an application architecture, made originally for JavaScript and now used in applications built with (such as React Native or Flutter). Redux is simplified version of architecture, made by Facebook. But what’s all about with Redux? Basically, you need to know three things: Redux Redux reactive frameworks Flux there’s a — your whole application state is kept only in one place (called store) single source of truth the — to change the application state you need to dispatch an action, and then new state is created state is read-only changes are made with — a pure function (to simplify, it’s a function without side effects) takes the previous state and an action, and returns new state pure functions Sounds cool, but what are the advantages of that solution? we have — it means that we exactly know what caused state change, we don’t have duplicated state and we can easily follow data flow control over the state pure — we can pass state, action and test if result is correct reducer functions are easy to test application is — we have different layers for actions, models, business logic, etc. — so you exactly know where to put another new feature clearly structured it’s great apps — you don’t need to pass state down the whole view tree from parent to child architecture for more complicated and there’ one more… Redux Time Travel There’s one cool feature possible in Redux — 🎉 ! With Redux and you can over the time, inspect actual state and . See this feature in action: Time Travel proper tools track your application state recreate it at any time Time Travel in action — how cool is that? Redux Widgets on a simple example All of the above rules makes data flow in Redux . But what does it mean? In practice it’s all done with . Let’s imagine application that shows button counter: unidirectional actions, reducers, store and states Your application has some at the beginning (number of clicks, which is 0) state Based on that state is rendered. view If user taps on button, there’s send (e.g. IncrementCounter) action Action is received by , which knows previous state (counter 0), receives action (IncrementCounter) and can return new state (counter 1) reducer Your application has new (counter 1) state Based on new state, is rendered again view So as you can see, generally it’s . You have single app , the is read-only for view, and to create new you need to send action. Sending action fires reducer that creates and emits new application . And history repeats itself. all about the state state state state state Redux Data Flow Example of Shopping List App with Redux Let me show how Redux works in practice on more advances example. We’ll create a simple ShoppingCart application. In this application there will be functionalities for: adding items marking items as checked and that’s basically all 😎 The application will look like this: You can see the whole application code on GitHub: _FlutterShoppingCart - Flutter example of shopping app using Redux architecture_github.com pszklarska/FlutterShoppingCart Let’s start with coding! 👇 Prerequisite In this article I’ll not show creating UI for this application. You can check the code for . We’ll start with coding from this point and we’ll add Redux to this application. this Shopping List application before implementing Redux here If you’ve never used Flutter before, I encourage you to try a . Flutter Codelabs from Google Setup To run with Redux on Flutter, you need to add dependencies to your file: pubspec.yaml flutter_redux: ^0.5.2 You can check the newest version on package page. flutter_redux Model Our application needs to manage adding and changing items, so we‘ll use simple model to store single item state. . As you can see, CartItem is just a plain Dart object. CartItem Our whole application state will be just list of CartItems class {String name;bool checked; CartItem (this.name, this.checked);} CartItem Note: Here’s the full source code for this file. Actions Firstly, we need to declare . Action is basically any . In our application we’ll have two actions, for adding and changing item: actions intent that can be invoked to change application state class {final CartItem item; AddItemAction (this.item);} AddItemAction class {final CartItem item; ToggleItemStateAction (this.item);} ToggleItemStateAction Note: Here’s the full source code for this file Reducers Then, we need to tell our application what should be done with those actions. This is why are for — they simply . We’ll have two reducers methods: reducers take current application state and the action, then they create and return new application state List (List items, dynamic action) {if (action is AddItemAction) {return ;} else if (action is ToggleItemStateAction) {return ;}return items;} appReducers addItem(items, action) toggleItemState(items, action) List (List items, AddItemAction action) {return List.from(items)..add(action.item);} addItem List (List items, ToggleItemStateAction action) {return items.map((item) => item.name == action.item.name ?action.item : item).toList();} toggleItemState Note: Here’s the full source code for this file. Method delegates the action to proper methods. Both methods and return new lists — that’s our new application state. As you can see, . Instead of it, we create new lists every time. appReducers() addItem() toggleItemState() you shouldn’t modify current list StoreProvider Now, when we have actions and reducers, we need to provide place for storing application state. It’s called in Redux and it’s for our application. store single source of truth void main() { final store = new Store >(appReducers,initialState: new List()); runApp(new FlutterReduxApp(store));} Note: Here’s the full source code for this file. To create store, we need to pass methods and . If we created the store, we must pass it to the to tell our application than it can be used by anyone who wants to request app state: reducers initial application state StoreProvider class FlutterReduxApp extends StatelessWidget {final Store > store; FlutterReduxApp(this.store); @overrideWidget build(BuildContext context) { }} return new StoreProvider >(store: store,child: new ShoppingCartApp(),); Note: Here’s the full source code for this file. In the above example is main application widget. ShoppingCartApp() StoreConnector Currently we have everything except… actual adding and changing items. How to do that? To make it possible, we need to use . It’s a way to . StoreConnector get the store and make some action with it or read it’s state Firstly, we’d like to : read current data and show this in a list class ShoppingList extends StatelessWidget {@overrideWidget build(BuildContext context) {return new ( {return new ListView.builder(itemCount: list.length,itemBuilder: (context, position) => },);}} StoreConnector , List > converter: (store) => store.state,builder: (context, list) new ShoppingListItem(list[position])); Note: Here’s the full source code for this file. Code above wraps default with . StoreConnector can take current app state (which is ) and map this with function to anything. For purposes of this case, it’ll be the same state ( ), because we need the whole list here. ListView.builder StoreConnector List converter List Next, in function we get — which is basically list of CartItems from , which we can use for building ListView. builder list store Ok, cool — we have reading data here. Now how to set some data? To do it, we’ll use also , but in a slightly different way. StoreConnector class AddItemDialog extends StatelessWidget {@overrideWidget build(BuildContext context) {return new StoreConnector , OnItemAddedCallback>(converter: (store) { } builder: (context, callback) {return new AddItemDialogWidget( );});}} return (itemName) =>store.dispatch(AddItemAction(CartItem(itemName, false))); , callback typedef OnItemAddedCallback = Function(String itemName); Note: Here’s the full source code for this file. Let’s look at the code. We used , as in the previous example, but this time, instead of mapping list of CartItems, into the same list, we’ll map this into . This way we can pass callback to the and call it when user adds some new item: StoreConnector OnItemAddedCallback AddItemDialogWidget class AddItemDialogWidgetState extends State {String itemName; final OnItemAddedCallback callback;AddItemDialogWidgetState(this.callback); @overrideWidget build(BuildContext context) {return new AlertDialog(...actions: [...new FlatButton(child: const Text('ADD'), ... ],);}} onPressed: () { callback(itemName);}) Note: Here’s the full source code for this file. Now, every time user press “ADD” button, the callback will dispatch event. AddItemAction() Now we can do very similar thing for toggling item state: class ShoppingListItem extends StatelessWidget {final CartItem item; ShoppingListItem(this.item); @overrideWidget build(BuildContext context) {return new (converter: (store) { }, builder: (context, callback) {return new ListTile(title: new Text(item.name),leading: new Checkbox(value: item.checked, );});}} StoreConnector , OnStateChanged> return (item) => store.dispatch(ToggleItemStateAction(item)); onChanged: (bool newValue) {callback(CartItem(item.name, newValue));}), typedef OnStateChanged = Function(CartItem item); Note: Here’s the full source code for this file. As in the previous example, we use for mapping into callback. Now every time checkbox is changed (in method), the callback fires event. StoreConnector List OnStateChanged onChanged ToggleItemStateAction Summary That’s all! In this article we created a simple Shopping List application using Redux architecture. In our application we can add some items and change their state. Adding new features to this application is as simple as adding new actions and reducers. Here you can check the full source code for this application, including widget: Time Travel _FlutterShoppingCart - Flutter example of shopping app using Redux architecture_github.com pszklarska/FlutterShoppingCart Hope you liked this post and stay tuned for more! 🙌