编写一个简单的Flutter应用

下面我们通过一个例子Flutter app的项目结构、源码结构、调试过程。

1. 创建Flutter项目

创建Flutter项目，可以使用IDE创建也可以使用flutter命令创建。

1.1. 使用flutter命令创建项目

flutter create tiziapp

当前命令会在当前目录生成一个tiziapp的目录，里面就包含我们初始化的项目结构。

1.2. 使用Android Studio创建项目

只要选择新建Flutter项目，根据提示设置即可。

1.3. 使用 Visual Studio Code 创建项目

• 打开 View > Command Palette。
• 输入 “flutter”，选择 Flutter: New Project。
• 输入项目名称，比如 tiziapp，然后点 Enter

2. Flutter项目结构

下面介绍下，新建项目后的项目结构。

.
├── android   // 包含android工程的初始化和配置文件。
├── build
├── flutter_app.iml
├── ios // 包含ios工程初始化和配置文件
├── lib // flutter app的源码目录, 主要就是在这里编写代码，这里可以根据项目需要自定义子目录。
│   └── main.dart // flutter app默认的入口源码文件。
├── pubspec.lock
├── pubspec.yaml // flutter 依赖管理配置文件，依赖的第三方包可以在这里配置
├── README.md
└── test

3. 简单的例子

下面是一个简单的例子，这个例子会在屏幕中间显示 Hello World

import 'package:flutter/material.dart';

void main() {
  runApp(  // flutter app 入口函数, 接受一个根 widget，这个根 widget会铺满整个屏幕
    Center(
      child: Text( // 文本widget控件，用来展示文本
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

使用上面代码替换lib/main.dart中的内容，然后保存。

4. 调试

4.1. 使用命令行模式进行调试

切换到项目根目录，使用下面命令运行程序。

flutter run

提示: 需要根据提前配置好调试环境，例如，配置好android/ios模拟器，或者真机调试。可以点击这里了解开发环境搭建。

4.2. Visual Studio Code调试

在isual Studio Code菜单中选择 Debug > 开始 Debugging 或者 按F5

提示: Android Studio的调试方式跟VS差不多。