FlutterDux — Flutter + Redux.js

FlutterDux allows you to take advantage of the latest in mobile development, while still having available the vast ecosystem of JavaScript libraries.

Flutter working remotely with Redux DevTools

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.

Flutter dispatches actions and subscribes to state changes

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.

Also, since the website is running on a fully capable WebView, you can leverage the full power of JavaScript and it’s established ecosystem of libraries (Firebase SDK, Realm, etc)!

Running the ‘counter’ demo

Navigate to the plugins example directory and flutter run

FlutterDuxMixin

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.

Load the website running redux

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’).

Optional

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.

Final thoughts

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.

References

  1. Flutter
  2. Polymer Project
  3. Redux
  4. Polymer-Redux
Like what you read? Give Paul DeMarco a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.