Last time we created the simplest of all possible Flutter apps, displaying a hello, Flutter text on the first page. Today we’ll go through each line of code in detail.

Open lib\main.dart

Second, code details

  1. Guide package
Dart is an Android-style UI component library, as well as an ios-style UI component library
import 'package:flutter/material.dart';
Copy the code
  1. Entry main function
// The main method is the entry to the entire app
void main() {
    //runApp passes a Widget as a parameter
    runApp(MyApp());
}
Copy the code
  1. About Widgets I found a quote on the Internet about widgets

    Widgets describe what the view should look like in its current configuration and state. When the widget’s state changes, it reconstructs its description (the displayed UI), and the framework compares the changes to determine the minimum changes needed to transition the underlying rendering tree from one state to the next.

Simply put, everything in Flutter is Wdiget, such as a piece of text, a button, an image, etc.

The build method is where the widgets are rendered. After all the widgets are nested by composition, the build method returns the widgets to the system.

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Hello Flutter',
     home: Scaffold(
       body: Center(child: Text("Hello, Flutter.")))); }}Copy the code

4. Widget introduction

  1. The MaterialApp is a root Widget provided by the system. It is a combination of semantic properties such as title and home. The entrance to every FLUTTER project should be a MaterialApp.
  2. Scaffold is a Scaffold widget provided by Flutter. Internal Settings appBar, Body, drawer, bottomNavigationBar and so on to help you quickly build a UI out.

So far, everything in Main. dart has briefly covered one side. The next section looks at the UI layout and common components of Flutter and completes a simple Demo.