The foreword 0.

Users who are new to Flutter may find the StatefulWidget widget unacceptable

I started out as well, but learning about React helped me quickly understand the concept of Flutter. Here is my understanding of the StatefulWidget community. I hope to help you resolve some of your concerns

1. Start with sliders

You might hit a wall the first time you use the Slider and find it won’t drag!

However, if you are more careful, you can see that the value of listening changes, which is different from Android

var slider = Slider( value: 0, max: 100, min: 0, onChanged: (e) { print('onChanged:$e'); }, onChangeStart: (e) { print('onChangeStart:$e'); }, onChangeEnd: (e) { print('onChangeEnd:$e'); }); / / / -- -- -- -- -- -- -- -- -- -- -- -- -- the main scene var scaffold = scaffold (body: Center (child: the slider,)); var app = MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: scaffold, ); void main() => runApp(app);Copy the code
2: How to make Slider useful

Now think back to how Does Android change properties

In Android, controls can modify their properties directly to the 'object. Set' property, but in FLutter you will find something strange: when you 'slider.value=20; This is really annoying, isn't it natural for objects to change properties? But Flutter said: Sorry, you can'tCopy the code

This made me wonder why the Widget source code says that all components are constant, it’s just a description of the element

Properties of components cannot be changed because they are final, so why is there state?

Actually is relatively constant and change, more than a constant state of continuous repeat can produce dynamic effect Just like movies are just pictures of superposition, a picture is a constant, it is just using the pixel colour information of a scene description But when multiple photos of the constant play continuously can produce the effect of dynamic, let us feel the inside of the person is alive, The world is in motion and the key to making it magic is how do you keep rendering, like a movie so much so that setState() in the state class comes up, give it to me, give me a shout and I'll update your state, okayCopy the code

It’s the same thing with React, which I think is very elegant. Objects that change their properties are unwieldy by comparison

The former can express, update and modify itself through a state, while the latter can only do it by himself

3: How to open Slider correctly

If you need state, you need a StatefulWidget like this: there is a private variable _value,

In the process of Slider dragging, execute the _render method for rendering. First give the value of Slider to _value during rendering. After the setState method is called, the build will be executed again, and then the value of Slider will use _value, thus achieving state update

class TextSlider extends StatefulWidget { @override State<StatefulWidget> createState() => _TextSliderState(); } class _TextSliderState extends State<TextSlider> { double _value = 0; @override Widget build(BuildContext context) { var show = _buildSlider(_value); return show; } _buildSlider(double value) { var slider = Slider( value: value, max: 100, min: 0, onChanged: (e) { print('onChanged:$e'); _render(); }, onChangeStart: (e) { print('onChangeStart:$e'); }, onChangeEnd: (e) { print('onChangeEnd:$e'); }); return slider; } _render(double value) { _value = value; setState(() {}); }}Copy the code
4: Such advantages

You might think that using just a Slider with a class is a bit of a drama

Trouble must have its value, simplicity must have its limits. This is the balance of the universe. When I first learned to program, I defined a Circle class, and I could use objects to calculate the area, and I thought, well, is that really necessary? It's a bit of a big deal to do it in one method. Then gradually find the charm of object-oriented, I do not know you to understand how everything has its object, here say my opinion: everything has its object is not standing in the perspective of human entity are objects in the world, but on the other a dimension an application is a small world, there are many objects mutual coordination and cooperation, to complete the function of the application. Everything in this little world is an object. Coder needs to manage the objects' appearance, life and death, family relationships, social relationships, and workflow. The creation of objects depends on the creation of classes, so classes are crucial, and their creation needs to stand in the view of God who rules the world. So programming for me is creation, and I am god of creation, and the height of your mind can make a completely different world before your eyes.Copy the code

Then again, why do it?

Three words: Easy to reuse, good maintenance, can extend this three words will accompany Coder programming career, how to let oneself to create the world of better operation, we paid from the design model to the data structure, from coding to refactoring, we try to adjust to maintain the order of the world, let them from the clutches of the bug Facing the scattered in the process of the code through the integration of a class, Android controls are pretty clunky to use and generally too difficult to reuse. Code is sporadic. For example, if a Slider slides Text to follow, create two objects in an Activity, Let the two coordinate, one or two is ok, too many will feel scattered, and redundancy ugly, so customize a View? Give me a break. The combination of controls in Android feels clunky. Even when I click on it, I have to find an ID first, but I still have no choice. Elegant look at Android, hate iron does not become steel. Until now, Flutter has appeared with React style on mobile, and even full Flutter feels very friendly to the interface. Although it is difficult to get used to the nesting of brackets at first, you will gradually find that its beautiful widgets see the elements on the interface as components, which are simple to use and easy to reuse.Copy the code
5: Combination of components

See how neat the combination Slider and Text is in the Flutter, just add some

If Android customizes such a control, you need to customize the ViewGroup to merge the two components so that the merging of components in Flutter is very convenient and simple to use

---->[_TextSliderState#build]---- var show = Column( mainAxisSize: MainAxisSize.min, children: <Widget>[_buildText(_value), _buildSlider(_value)], ); _buildText(double value) {return Text(value.toStringasfixed (2),// keep two valid digits style: TextStyle(fontSize: 20),); }Copy the code
6: The glamour of status

For example, if you need to slide to 50 like this, the check box is checked, and when clicked, the check box is cleared

It’s messy to think about in Android, but custom controls are troublesome, just like hearthstone hands are full of expensive cards. You can close the mood of Flutter as you want. As soon as the state changes, I will respond to you.

---->[_TextSliderState#build]---- var show = Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ _buildCheckBox(_value), _buildText(_value), ], ), _buildSlider(_value) ],); _buildCheckBox(double value) { var checked = value > 50; return Checkbox( value: checked, onChanged: (bool) { _render(0); }); }Copy the code

It would be nice to have an identity parent like wedgetChild.father=wedgetFather

7: About modification

You can also easily change the relative positions of components through the layout container

var show = Row(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _buildCheckBox(_value),
        _buildText(_value),
      ],
    ),
    _buildSlider(_value)
  ],
);
Copy the code
8. Eavesdropping

Be aware that every component you define is reusable, just as a Flutter native component is

If we need to drag the listener, we need to call back before rendering so that the user can accept the callback argument

class TextSlider extends StatefulWidget { ValueChanged onChanged; TextSlider({this.onChanged}); @override State<StatefulWidget> createState() => _TextSliderState(); } typedef ValueChanged = void Function(double value); _render(double value) { if(widget.onChanged! =null){ widget.onChanged(value); } _value = value; print(value); setState(() {}); }Copy the code
9. Flexible reuse

Once a component class is formed, reuse is very convenient if Android implements the following drag update

Logically, it’s not complicated, but the code will be a lot, because Android is hard to reuse components, so you have to do it one by one. Flutter is simple to implement and even easy to listen to. Here’s an example: In just a few lines of code, four drag-by-drag listeners are implemented that bulky XML can’t do

var a = (a) {
  print("a:$a");
};

var b = (b) {
  print("b:$b");
};

var c = (c) {
  print("c:$c");
};

var d = (d) {
  print("d:$d");
};

var childs= [a,b,c,d].map((fun){
  return SizedBox.fromSize(size: Size(250, 100), child: TextSlider(onChanged: fun,),);
}).toList();

var scaffold = Scaffold(
    body: Center(child: Wrap(children:childs,),)
);
Copy the code
Nodule 10.

Flutter is very user-friendly and complements the Android view nicely.

Not to mention its cross-platform capabilities, Flutter is a rising star. What are you waiting for? Witness the charm of Flutter and you will love it.

conclusion

This is the end of this article. If you want to taste Flutter quickly, Flutter For Seven days is a must-have. If you want to explore it, follow in my footsteps and complete a Flutter tour. In addition, I have a Flutter wechat communication group. You are welcome to join and discuss Flutter issues together. My wechat account is ZDL1994328.