From C, we progressed to Java, kotlin, Dart, Flutter, and Python. Times are progressing, we also have to follow the progress, new ideas, new tools, new language, faster and faster, more and more things, keep learning is really coder this line of constant criteria ah

After reading this article, I recommend you to go to see this article again. After all, it is difficult to support lonely trees.

  • Detailed description of Flutter layout

Flutter has no concept of Activity

Those of you who know anything about Flutter should know that MainActivity is the only Activity left in the Android app that builds Flutter. It uses a FlutterView inside to host all Flutter pages. See below:

Therefore, Flutter does not have a natural concept of a page. Flutter follows the idea of building pages in RN and front-end, and is very different from Android in terms of UI. Android’s unique way of writing XML layouts is now a stranger, and history is back in the mainstream

Just because a Flutter runs on Android doesn’t mean it’s still Android. A Flutter is something completely new. Not before think of simply learn to be able to fix, is to malicious heart to spend some time. Here we begin with a step by step understanding the allure of Flutter, or getting familiar with mainstream front-end development

Make fun of the Weight of Flutter

Just like JAVA, everything has a slogan, and Flutter has its own slogan: Everything is Weight. If you look directly at the Flutter community, you will find this expression:

The effect of Flutter is excellent, at least for me. In fact, this is the problem of thinking on Android. Learning Flutter with The expectation of Android is absolutely stupid. If we learn as a new language, it will be much easier to learn if we take a moment to carefully look for patterns and ideas

In the android
  • -> We write textView in ConstraintLayout, LinearLayout, RelativeLayout and so onLayout containerIn your XML tag, you can write your own attributes, width, height, position, style, any kind of attributes, and even customize your own desired attributes
<android.support.constraint.ConstraintLayout <Button android:id="@+id/btn_toast" android:layout_width="wrap_content" Android :layout_height="wrap_content" Android :layout_marginTop="20dp" Android :text="toast component" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>Copy the code
  • -> Then we use a special XML file to hold the UI style
  • -> Then an Activity parses and renders the XML file
  • -> Android app uses specializedThe stackTo manage the comings and goings of these activities

Android UI layer, naming conventions: layout container end with Layout, content components end with View, property setting location unified

In the Flutter

Everything has changed:

  • Weight is no longer clear, is it like how you call it
  • Weight has more responsibilities. Many Weight components have many tasks, and some of the same tasks have several weights to choose from
  • Property Settings are no longer uniform, there is a hierarchy

When I looked at the Weight of Flutter, I felt cool…

Android experience is useless, baby heart bitter ah…

Flutter weight features

Learn about Flutter weight properties before you learn Flutter weight…

1. The Flutter isDeclarative programming

This is A decisive difference from Android. On Android, we write XML files and get references to the View in our activity, but Flutter does not. Flutter directly draws the UI without the annoying XML file. Advantages are: writing simple, less code, arbitrary strong, like how to write how to write. The downside: no preview, cumbersome to look at over time, need to use third-party tools to view the UI structure

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( wordPair.asPascalCase, ), RandomWord(), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), RaisedButton( onPressed: _other, child: Text(" incrementCounter "),)],),), floatingActionButton: floatingActionButton (onPressed: _incrementCounter, Tooltip: 'Increment', child: Icon(Icons.add), ), ); }Copy the code
2. The Flutter weight naturally implements data binding

In fact, this feature is part of declarative programming, and it works better to show it. On Android you can only modify a view by taking setXXXValue and referring to it. Implementing a responsive UI(UI and data binding) requires touching other components and learning some extra code

Flutter is less troublesome. The Weight UI is directly bound to data, as long as setValue({… }) to update the UI, see the following example:

class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } void _other() { setState(() { _counter--; }); } @override Widget build(BuildContext context) { body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '$_counter', style: Theme.of(context).textTheme.display1, ), RaisedButton( onPressed: _other, child: Text(" incrementCounter "),)],),), floatingActionButton: floatingActionButton (onPressed: _incrementCounter, Tooltip: 'Increment', child: Icon(Icons.add), ), ); }}Copy the code

RaisedButton click -1, floatingActionButton click +1, onPressed property to configure the click method, As long as the text component references the value of count, then we can use the system API setState to change the value

setState(() {
    _counter--;
});
Copy the code

Flutter abandonsxml and UI responsive programming much more easily than Traditional Android. Even if Android uses DataBinding to write UI assignment logic in XML, it is far less intuitive than Flutter. Flutter doesn’t open other files and just read them. Programmers are lazy people, as long as they can be lazy, is progress, is excellent

3. Break up properties of Flutter

In Android, we can configure any properties of Flutter in XML, which can be categorized into: width, height, size, position, margin, border, background, and view’s own properties

A Flutter elevates all properties of a Flutter to the layout container level, except for the properties of the view itself. For example, if you add padding to a text in a Flutter, you need to put a layer of padding around the text

            Padding(
              padding: EdgeInsets.all(10),
              child: (Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              )),
            ),
Copy the code

The container of a Flutter determines the appearance (external properties) of the view inside the Flutter. The specific drawing is assigned to the weight inside the container. This looks like a template design mode, with the template outside and the variable parts inside

OK, with these bases, the weight of the underlying Flutter is easy to understand

Create a Flutter Weight hierarchy

Everything in Flutter is Weight, Weight is the parent of all views just like view

Weight is divided by function, which can be looked at like this:

  • Responsible for the concrete drawingContent Weight
  • Responsible for organizing the Weight styleLayout of the Weight, can have multiple child weights inside
  • Responsible for external stylingModified Weight, can only have 1 child Weight inside

Combined with Android:

  • Content Weight= TextView
  • Layout of the WeightLayout containers such as LinearLayout and RelativeLayout
  • Modified Weight= width, height, and padding
Layout of the Weight

The typical layout weights of a Flutter include row and Column. Row is a row and Column is a Column

  • The row row
class oneRow extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Text("AAAAAA"), Text("BBBBBB"), Text("CCCCCC"), ], ); }}Copy the code

  • The Column Column
class oneColume extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Text("AAAAAA"), Text("BBBBBB"), Text("CCCCCC"), ], ); }}Copy the code

Modified Weight

The most classic way to decorate Weight is with Container, and here we have a background color

class oneContainer extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( color: Colors.lightBlueAccent, child: oneRow(), ); }}Copy the code

The specific weight of Flutter will not be written here. That will be the content of the next section. Through these small examples, we can familiarize ourselves with the weight structure of Flutter

How does Flutter organize pages

Flutter does not have a page concept such as Activity, but the UI graphics of Flutter are page by page. Since there are still pages in the design process, Flutter must also have a page or similar concept in order for our UI design to land

The closest thing to the concept of a page in Flutter is the only two components in Flutter that have Weight in their name: the StatelessWidget and the StatefulWidget

All the UI and pages of Flutter are displayed in a FlutterView. Statelesswidgets and StatefulWidgets can be interpreted as ViewTree + viewGroup or layout

For example, android XML has a layout layer on top of a layout layer on top of a small layout. In the Container example, oneContainer has a row inside it. In the previous example, we wrote the layout as a class. This is the custom viewGroup of Flutter

The difference between a StatelessWidget and a StatefulWidget is that a StatelessWidget can modify its UI within its own layout, while a StatelessWidget can modify its UI within its parent layout

The setValue method can be run in a StatefulWidget. SetValue actually calls the StatefulWidget’s build method multiple times. StatelessWidget vice

Flutter then has a special API for switching between statelessWidgets and StatefulWidgets to display different pages. See later

The last

In fact, this article is not to learn how to use Flutter Weight directly, but to try to sort out the classification and relationship of Flutter Weight, so as to provide some convenience to those who are confused about Flutter or have not started to learn about Flutter. I hope it can help you