After creating a Flutter New Project with Andorid Studio, a Flutter Demo App is up and running. Below is the engineering structure in Android Studio. We developed the Flutter App in its lib directory.



Next, take a look at the code in Main. dart, remove the comments there for length reasons.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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 clicked the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment', child: Icon(Icons.add), ), ); }}Copy the code

1, the first line import

Dart, which is the Material implementation of the Flutter, Material Design Language, which is a Design language developed by Google.

import 'package:flutter/material.dart';
Copy the code

Ii. App running entrance

Usually the entry function is main, so let’s understand the entry code.

void main() => runApp(MyApp());
Copy the code

The runApp function parameter is an instance of MyApp. View the comment on the function: Inflate the given widget and attach it to the screen, meaning that it parses the given widget and attaches it to the screen.

Third, MyApp StatelessWidget

To understand the following code, you need to know what a StatelessWidget is.

A widget that does not require mutable state.

This translates to widgets that do not require mutable state. Actually developing the UI with Flutter is a “heap” Widget, including the padding. Statelesswidgets are used in scenarios where state maintenance is not required. They typically build the UI by nesting other widgets in the build method, recursively building their nested widgets during the build process.

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}Copy the code

Then the MaterialApp must also be a Widget, which implements a Material style Widget.

Title —- Theme of the specified title —- Subject related Home —- home page

MyHomePage is another Widget.

Four, MyHomePage StatefulWidget

A widget that has mutable state.

A Widget with mutable state.

A StatefulWidget class corresponds to a State class. State represents the State to be maintained by the corresponding StatefulWidget. The State information stored in State can be:

1. The Widget can be read synchronously when it is built;

2. Can be changed during the Widget lifecycle. When the State is changed, the setState() method can be manually called to notify the Flutter Framework that the State has changed. Its build method is called again to rebuild the Widget tree for the purpose of updating the UI.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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 clicked the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment', child: Icon(Icons.add), ), ); }}Copy the code

We see that _MyHomePageState inherits from State, and it contains inside the _counter field, which is used for counting.

Scaffold is another StatefulWidget. It means to build the UI skeleton. It includes the appBar, body and floatingActionButton.

Then I came across the Center Widget, which literally means a Center Widget, and its child is a Column Widget. It is not difficult to infer from the code that the children of this Widget are arranged vertically, like a linear layout from top to bottom.

Finally, there is the floatingActionButton button Widget.

The code also involves mainAxisAlignment, style and so on without detailed analysis, later will gradually understand its use.

Finally, take a look at the interface when it’s up and running.



Finally, as an Android developer, looking at this code, we initially wanted to look for an XML layout equivalent layout file, which didn’t really exist in Flutter development, and we wrote the layout code together in DART.

The resources

1. Book. Flutterchina. Club/chapter3 / fl…