flutter from entry to the master three

flutter through a set of code to run on multiple platforms, including mobile, web, desktop, embedded, Web-enabled platform but has not yet reached the Beta stage, please do not use in production, when reading the document, we recommend reading https : //flutter.cn , which is the official document and synchronized Chinese website, reduce the cost of learning

In flutter, all content is widget, which is the smallest unit flutter project constitutes
If you use Flutter in the country, then you may need to find a credible synchronized with the official mirror sites to help you Flutter command-line tool the mirror site to download the resources they need. To do this you need to set two environment variables: "PUB_HOSTED_URL" and "FLUTTER_STORAGE_BASE_URL", and then run Flutter command-line tool.
The following cases are all code and editing based editors vs code, use the editor and the editor plug-in to get a better development experience. These plug-ins provide code completion, code highlighting, widget assistant editor of features, and support for running and debugging projects.
tip: In the flutter project can be checked by Flutter Doctor project if there is a problem
projects created by vs code directory as the code we write primarily on the lib folder below, where the most important thing is lib (writing code) and pubspec .yaml (CI equivalent package.json, set up the project in the project npm)

code for the desired application in the 'lib / main.dart', if you want to explain the higher level of understanding of each code block, please see comments in the code.

// package:这是表示系统内置的包
// 下面表示创建了一个具有 Material Design 风格的应用， Material 是一种移动端和网页端通用的视觉设计语言， Flutter 提供了丰富的 Material 风格的 widgets。
import 'package:flutter/material.dart';
// 下面表示引进第三方包english_words
import 'package:english_words/english_words.dart';
// 主函数（main）使用了 (=>) 符号，这是 Dart 中单行函数或方法的简写，也就是箭头函数，注意如果使用箭头函数，只能写一行。
void main() => runApp(MyApp());
// StatelessWidget表示无状态的组件，表示该组件内所有的状态就是不能变化，如果需要继承有状态的组件，则是StatefulWidget
class MyApp extends StatelessWidget {
  // 只要调用setState方法，build就会重新加载，flutter框架的思想是来源于react
  //注意一个widget主要工作是提供一个 build() 方法来描述如何根据其他较低级别的 widgets 来显示自己，可以和react中的render函数作比较。
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        //  Center widget 可以将其子 widget 树对齐到屏幕中心。
        body: Center(
          child: RandomWords()
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  RandomWords({Key key}) : super(key: key);

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

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

tip:

• In one possible Text Container outer sheath, this can make full use of Container set width, height, etc.
• Row, Column flexbox based design, after use in the vertical and horizontal position of the elements are centered
• Stack-based think of and absolute positioning design

Scan code number of public attention, there are more exciting waiting for you Oh articles