Flutter 入口

1、Flutter 初始化项目方案

1、Android Studio

新项目
New Flutter Project --> Flutter --> Next --> 修改相应配置 --> create

添加现有项目
file --> open --> 选择 flutter 项目 --> open

2、终端

cd 到创建目录中 --> flutter create terminalflutter01 --> vscode --> 文件 --> 打开文件夹 --> 选中刚创建的文件

2、目录介绍

android：android 平台相关代码
iOS：iOS 平台相关代码
linux：Linux 平台相关代码
macOS：macOS 平台相关代码
web：web 平台相关代码
windows：windows 平台相关代码
lib：flutter 相关代码，编写代码主要在该文件夹
test：存放测试代码
pubspec.yaml：配置文件，一般用于存放一些第三方库的依赖
analysis_options.yaml：分析 dart 语法文件（老项目升级新项目有警告信息的话，可以删掉此文件）

3、入口方法

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const Center(
    child: Text(
      "Hello Flutter",
      textDirection: TextDirection.ltr,
      style: TextStyle(color: Colors.red, fontSize: 30.0),
    ),
  ));
}

MaterialApp 和 Scaffold

MaterialApp：是一个方便的 widget，它封装了应用程序实现 Material Design 所需要的一些 widget，一般作为顶层的 widget 使用。
常用属性：
home：主页
title：标题
color：颜色
theme：主题
routes：路由
...

Scaffold：是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer，snackbar 和底部 sheet 的 API。
常用属性：
appBar：显示在界面顶部的一个 appBar。
body：当前界面所显示的主要内容的 widget。
drawer：抽屉菜单控件。
...

示例

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("Hello Flutter")),
      body: const myApp(),
    ),
  ));
}

// ignore: camel_case_types
class myApp extends StatelessWidget {
  const myApp({super.key});

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

注：
在 Flutter 中自定义组件其实就是一个类，这个类需要继承自 StatelessWidget/StatefulWidget。
StatelessWidget：无状态组件，状态不可变的 widget。
StatefulWidget：有状态组件，状态可能在 widget 的生命周期内改变。