Straight to work, no why ~

Analysis of the

After the Flutter environment is set up, you can create a Flutter project and see the official default counter Demo.

Guide package

Import the Material UI library here

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

Application gateways

  • The main function acts as the entry to the application to start the Flutter application via runApp, passing in the Widget argument (MyApp()).

  • => Indicates the single-line Dart function.

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

The application structure

  • Here, MaterialApp is used to build a Material design style application MyApp, in which the application name, theme color, default Home interface, language, routing and some debugging switches can be set.

  • MyApp inherits statelessWidgets (stateless components) and builds them directly from builds

class MyApp extends StatelessWidget {
  // Build the root Widget of the application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // The name of the multitask window application
      title: 'Flutter Demo'.// Apply the theme
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Apply the interface Widget displayed by default
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}Copy the code

The Home page to realize

  • MyHomePage Is the real page implementation of the Demo, passed in by parent to the title
  • MyApp inherits StatefulWidget (stateful component) and needs to return the corresponding State through createState
class MyHomePage extends StatefulWidget {

  // Title is passed in by the parent class and is set to final
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
Copy the code
  • _MyHomePageState inherits State, which is generic as MyHomePage, and builds widgets from build
class _MyHomePageState extends State<MyHomePage> {

  // Count the number of clicks
  int _counter = 0;

  void _incrementCounter() {
    // Calling setState calls build to redraw the screen
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    / / build the Widget
    return Scaffold(
      appBar: AppBar(
        // appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center centers the child Wiget, where the screen is centered
        child: Column(
          // Column aligns a set of child widgets vertically
          mainAxisAlignment: MainAxisAlignment.center,
          // The main axis is centered
          children: <Widget>[
            // List of child components
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
      // Hover button, press to change _counter count); }}Copy the code

At this point, count Demo analysis finished…

conclusion

Most objects in Flutter are widgets, and the implementation classes of these widgets have simple usage examples. The following widgets are used in the Demo:

  1. StatelessWidget

An abstract class that inherits from a Widget and can inherit the StatelessWidget implementation when there is a fixed scenario that does not need to change state, nesting the implementation UI in the build method. The StatelessWidget corresponds to the StatefulWidget

  1. StatefulWidget

An abstract class that inherits from a Widget and inherits the StatefulWidget implementation when there is a scenario that requires a State change, returning the required State in createState (inheriting the State implementation). After inheriting State, you nest the implementation UI in the Build method and call setState whenever you need to update the UI. The StatefulWidget corresponds to the StatelessWidget

  1. MaterialApp

MaterialApp inherits from StatefulWidget and implements a Material Design style App

  1. Scaffold

Scaffold inherits StatefulWidget and implements visual layout structure based on material design, including appBar, body, drawer, bottomNavigationBar, etc

  1. AppBar

AppBar inherits StatefulWidget and implements a material designed application bar

  1. Center

Center inherits from Align as you track down, it still inherits from widgets to Center a single child Widget.

  1. Column

Column inherits from Flex step by step, and it still inherits from widgets to implement vertical array display widgets

  1. Text

Text inherits from StatelessWidget to implement a single-style Text control

  1. FloatingActionButton

FloatingActionButton inherits the StatelessWidget and implements a Material Design-style floating button component

  1. Icon

FloatingActionButton inherits the StatelessWidget and implements a Material Design style icon component