Flutter: state management

Nhan Cao
Nhan Cao
Dec 12, 2018 · 4 min read

About flutter architecture pattern, all you need is ‘state management’ keyword.

“How do I best manage the state of the UI controls in a medium-to-large Flutter app?” is a question we often hear. This is an complex topic with strong, and differing, opinions. Until we provide more docs/examples, learn more at the following links, some of which have been contributed by the Flutter community. — https://flutter.io/docs/development/data-and-backend/state-mgmt

How to build reactive mobile apps with Flutter?

This article, I got the idea from Build reactive mobile apps with Flutter, a video from Google I/O 2018

Now we go with the default flutter project.

Flutter state

The widget is the main component in Flutter. Each widget has stated. The screen is a widget tree. The passing state follows the image.

Using setState

For update state using setState, but it will re-render all sub-widgets.

In the default flutter project using setState for an example. But I make a small changing by adding Stateless and Stateful widgets.

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
TestStateless(),
TestStateful()

],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

class TestStateless extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('build TestStateless');
return Text('TestStateless');
}
}

class TestStateful extends StatefulWidget {
@override
_TestStatefulState createState() => _TestStatefulState();
}

class _TestStatefulState extends State<TestStateful> {
@override
Widget build(BuildContext context) {
print('build TestStateful');
return Text('_TestStatefulState');
}
}

For the first render, I got the log

Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...
Syncing files to device Android SDK built for x86...
I/flutter (11736): build TestStateless
I/flutter (11736): build TestStateful

Then, just press on plus floating action button. The log output with each button pressing.

  • Accessing state
  • Updating on change

Using Inherited Widget

  • Propagate data down the tree
  • Update widgets on rebuild

Define InheritedWidget

class MyInheritedWidget extends InheritedWidget {
MyInheritedWidget({
Key key,
@required Widget child,
this.counter,
}) : super(key: key, child: child);

final int counter;

static MyInheritedWidget of(BuildContext context) {
return context.inheritFromWidgetOfExactType(MyInheritedWidget);
}

@override
bool updateShouldNotify(MyInheritedWidget oldWidget) =>
counter != oldWidget.counter;
}

Access to state

  • Accessing state
  • Updating on change
  • Mutating state (InheritedWidget marked as @immutable, all instance fields must be final.)

Using Scoped Model

  • External package
  • Build on InheritedWidget
  • Access, Update & Mutate

Look the log, it just only output for init render.

Reactive with streams

For easier and powerful, I use rxdart to handle async: https://pub.dartlang.org/packages/rxdart#-installing-tab-

Using stream builder widget

StreamBuilder<T>(
stream: input,
builder: (context, snapshot) {
...
}
)

Example with the simple bloc

I think using stream is the best approach for now. So that, just use the stream for all and avoid setState. May be difficult with you at begin, but it will better in the future.

For more example of Bloc, you can visit https://www.didierboelens.com/2018/12/reactive-programming---streams---bloc---practical-use-cases/

beesightsoft

Founded since 2011 by young and passionate technologists. Beesight Soft has started by innovative passion "together makes perfect". We stay up late together to ensure project deadline. And we are a family.

Nhan Cao

Written by

Nhan Cao

nhancv.com

beesightsoft

Founded since 2011 by young and passionate technologists. Beesight Soft has started by innovative passion "together makes perfect". We stay up late together to ensure project deadline. And we are a family.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade