FlutterDux — Flutter + Redux.js
How it works
When your app starts, the redux-driven website is loaded on the platform’s WebView. A Flutter platform channel is used to dispatch actions down to the website, while state changes are reported back up to Flutter.
Redux naturally suggests a nice decoupling between views and business logic, making it possible to swap out your current view library (react/polymer) for Flutter, or even piggy-back off of an existing website with minimal changes.
Running the ‘counter’ demo
Navigate to the plugins example directory and
Flutter widgets with FlutterDuxMixin have the ability to dispatch actions and subscribe to state ‘properties’. Whenever a state slice changes for that property, the Widget’s
setState gets called automatically.
Loading the website
We’ll need a website running redux, this can either be hosted externally or internally if you need offline access. I’ve created a small plunker example here for testing.
Note: It is assumed that the website exposes the redux store as a global variable. If not, you can specify the base path in loadUrl(url, basePath: ‘base’).
Remote Redux DevTools
One of the coolest ways of visualizing state changes in redux is with Redux DevTools. Simply follow the instructions to setup, nothing extra is needed for Flutter!
Webpack Dev Server
If you’d like automatic reloading of your website while developing, I recommend using webpack-dev-server.
For a starter web project, check out this repo.
By confining app state to a WebView running redux, it enforces correct usage of the framework. Flutter’s only concern then is layout and user interaction, a proper View layer.
Android and iOS WebViews allow for geolocation, camera and some other hardware functionality. For anything else, a Flutter Plugin can be used, and the data can be dispatched as an action, e.g. ‘BLUETOOTH_DEVICE_FOUND’.
It’s been magical using this with a webpack-dev-server… Once your Flutter Widgets are in place and final, changes to your website automagically change state in your app, without the need to Hot-Reload (even though it’s lightning fast!).
If you are looking for pure Dart versions of redux, check out the list at Awesome Flutter.