Simple state management (translation) Google Flutter in

How I met the Google Flutter

This I'm here as usual code code day. A friend of mine sent me such a question in our developer group, if anyone tried Google Flutter. It wants to know the comparison between React Native and Google Flutter. This question made me grow grass a Google Flutter. Google Flutter never heard of me before. Whether it is worth compared with React Native, as compared to the AngularJS ReactJS?

I have to admit. I'm a fan of React brother. I have used ReactJS almost two years. I also wrote React Natice. But do not misunderstand me. I was also crazy about AngularJS before. There are about a year I was a AngularJS developers. Then I changed a ReactJS use of the new company. Later, the things you know.

## Long story short I am eager to try to use Flutter

Google Flutter is a new platform, in this platform you can use a Dart Code while developing Android and iOS apps. After migrating to the new development stack, I do know a simple application, at least the priority is state management. It led me to three questions:

1. How to pass downwardly in a state of the application widget tree

2. How to rebuild after widget update status of the application

3. How to maintain state synchronization between the pages at the same time to jump.

carried out

By default, flutter created main.dart. This is where the process is running. Because I want to create a direct jump two pages, I created two additional documents: MyHomePage.dart and MySecondPage.dart.

The purpose of the application process is to allow users to do the following things:

MyHomePage in the counter increment
Jump to MySecondPage
MySecondPage of the counter is decremented

This may seem very simple, but I have to find a way to maintain synchronization between the counter MyHomePage and MySecondPage.

The initial value of the counter is 0. If the user MyHomePage the increment twice, after you jump to MySecondPage, 2-bit counter must show.

Meanwhile, if the user MySecondPage decremented twice, when a user jumps to MyHomePage, it must display the counter to zero.

This is called state management.

I learned mechanism Google Flutter has setState (), and this mechanism React too. This enabled me to find a solution quickly.

In my main.dart document:

import 'package:flutter/material.dart';
import 'package:flutter_redux_example/screens/MyHomePage.dart';
void main() => runApp(new MyApp());
class  extends StatefulWidget {
  
  
  _MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
  int counter;
  @override
  void initState() {
    super.initState();
    counter = counter ?? 0;
  }
  void _decrementCounter(_) {
    setState(() {
      counter--;
      print('decrement: $counter');
    });
  }
  
  void _incrementCounter(_) {
    setState(() {
      counter++;
      print('increment: $counter');
    });
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(
        title: 'My Home Page',
        counter: counter,
        decrementCounter: _decrementCounter,
        incrementCounter: _incrementCounter,
      ),
    );
  }
}

From the above code, you can see _decrementCounter () and _incrementCounter (). They are responsible for operating the counter value, and then I pass them to the MyHomePage constructor.

In my MyHomePage.dart document:


import 'package:flutter/material.dart';
import 'package:flutter_redux_example/screens/MySecondPage.dart';
class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key key,
    this.title,
    this.counter,
    this.decrementCounter,
    this.incrementCounter
  }) : super(key: key);
  final String title;
  final int counter;
  final ValueChanged<void> decrementCounter;
  final ValueChanged<void> incrementCounter;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  void _onPressed() {
    widget.incrementCounter(null);
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text('You have pushed the button this many times:'),
            new Text(
              widget.counter.toString(),
              style: Theme.of(context).textTheme.display1,
            ),
            new RaisedButton(
              child: new Text('Next Screen'),
              onPressed: () {
                Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (context) => new MySecondPage(
                      widget.decrementCounter,
                      title: 'My Second Page',
                      counter: widget.counter,
                    ),
                  ),
                );
              },
            )
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _onPressed,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

From the above code, you can see I put decrementCounter () MySecondPage passed down to the constructor.

In my MySecondPage.dart document:

import 'package:flutter/material.dart';

class MySecondPage extends StatefulWidget {
  MySecondPage(
    this.decrementCounter, 
    {Key key, this.title, this.counter}
  ): super(key: key);
  final String title;
  final int counter;
  final ValueChanged<void> decrementCounter;
  @override
  _MySecondPageState createState() => new _MySecondPageState();
}
class _MySecondPageState extends State<MySecondPage> {
  void onPressed() {
    widget.decrementCounter(null);
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text('You have pushed the button this many times :'),
            new Text(
              super.widget.counter.toString(),
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    floatingActionButton: new FloatingActionButton(
      onPressed: onPressed,
      tooltip: 'Decrement',
      child: new Icon(Icons.indeterminate_check_box),
      backgroundColor: Colors.red),
    );
  }
}

结论

对于有着React背景的的开发者来说，玩弄Google Flutter中的基础状态管理不是已经特别难得事情。方法看起来很类似：存在一个setState()机制来对视图进行更新。StatefulWidget以及StatelessWidget的概念，对于我来说就行Component和PureComponent。Flutter把它们叫做Widget而React把它叫做Component。

So, basically, the main problem is the Google programming language used by the Flutter. Because it uses Dart, I adapted to the paradigm of grammar and Dart have. So far, not particularly difficult. For me, Dart Java and Javascript just had a baby.

In this article, I managed to solve three problems I mentioned earlier to:

1. How the application widget tree passed down a state / by

2. How to rebuild widget / application by the state after updating

3. How to maintain state synchronization between the pages at the same time to jump. /by

Remember, this is a very simple application. On large applications things get complicated. Imagine that you want to pass down the variables in the application of all the widget. This is a distressing thing.

In React environment, I am using Redux to manage application state. I learned Redux also applies to Google Flutter. In fact, I have successfully achieved Redux on Google Flutter application. Let's see if I can publish articles about this content.

: Original Big Box simple state management (translation) Google Flutter in