Flutter--Center、MaterialApp、Scaffold、把内容抽成一个组件

1.项目初体验

新建一个项目，删除main.dart里面的所有代码。

Flutter项目的入口方法也是main()，通过在main方法里调用runApp方法传入一个Widget实例。

我们可以先行通过Center组件感受以下，在Center组件中设置一个Text,同时给Text设置一些样式：

import 'package:flutter/material.dart'; 

void main() {
  runApp(const Center(
    child: Text('你好Flutter',
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.red, fontSize: 40)),
  ));
}

编译，看到的效果如下：

一片漆黑

2.使用MaterialApp和Scaffold两个组件来装饰App

(1)MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所需的一些Widget。一般作为顶层widget使用。

常用的属性有：home(主页) title(标题) color(颜色) theme(主题) routes(路由)

（2）Scaffold是Material Design布局结构的基本实现，此类提供了用于显示drawer、Snackbar和底部Sheet的API。

Scaffold有以下几个主要属性：

Appbar--显示在界面顶部的一个AppBar。

body--当前界面所显示的主要内容Widget。

drawer--抽屉菜单控件。

...

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好，Flutter'),
      ),
      body: const Center(
        child: Text('你好Flutter',
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.red, fontSize: 40)),
      ),
    ),
  ));
}

3.Flutter把内容单独抽离成一个组件

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget或者StatefulWidget。

StatelessWidget是无状态组件，状态不可变的widget。

StatefulWidget是有状态组件，持有的状态可能在Widget生命周期改变。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好，Flutter'),
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('你好Flutter',
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.red, fontSize: 40)),
    );
  }
}