flutter【12】开发环境配置+初始工程讲解

之前写过几篇dart语言特性的文章，算是英文官方文档的一个简单翻译，最近用 flutter 写了一个领电商平台优惠券的 app（还有微信小程序，之前的文章有），没有上线，有兴趣的可以点击链接 鲸鱼精选 下载看看。

最近几个月网上的flutter博客文章增长的速度很快，而且简单的flutter app开发确实技术含量不需要太高，所以挺纠结flutter方面的文章到底写不写。。。经过几天的纠结之后，决定还是把flutter的文章写下去吧，按自己的思路一篇一篇写。

1 环境配置

从flutter环境配置起步，具体步骤可以参考 安装和环境配置，描述的挺详细的，这里呢针对 windows + androidstudio 平台写几点关键步骤和注意事项。

flutter sdk 下载

下载 windows 平台对应的sdk压缩包，截止到目前是 flutter_windows_v1.7.8+hotfix.4-stable.zip

添加 flutter 环境变量

选好位置解压，将 sdk 中的 bin 目录添加到环境变量

添加国内镜像

如果不用国内镜像的话，后面开发中使用依赖会下载的很慢很慢，甚至下载不下来。目前 flutter中文网 上提供了两个镜像地址：Flutter社区镜像、上海交通大学Linux用户组。推荐使用Flutter社区的镜像，我之前用上海交大那个还是不行，特别慢，还总失败。

使用方法是，新建两个用户或者系统变量，变量名分别为 FLUTTER_STORAGE_BASE_URL、PUB_HOSTED_URL，对应的值分别是 https://storage.flutter-io.cn，https://pub.flutter-io.cn。

//Flutter 社区镜像
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn

//上海交通大学 Linux 用户组
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn

配好国内镜像之后，以后下载的依赖会放在 flutter\.pub-cache\hosted\pub.flutter-io.cn 文件夹中，如果开发中依赖下载不下来，可以看看有没有该文件夹，如果没有应该是镜像配置有问题。

flutter 环境检查

执行 flutter doctor 命令检查flutter的环境，一般都会提示几个问题

1. Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
   ：这种是因为android sdk和buildtoos版本低导致的，打开AS，更新到错误信息里面描述的具体版本即可
2. Android license status unknown：错误中有提示，运行 flutter doctor --android-licenses 命令即可，有提示输入 y 即可。
3. 电脑上如果有安装 android studio/vscode/idea 的话，会提示这个ide工具没有安装 flutter 插件，android studio上打开 setting 界面的 plugin 界面，搜索 flutter ，点击安装，完成后重启即可。你使用那个ide工具开发就解决哪一个就行，其他工具的报错可以不用管。

经过以上几步，flutter的环境就算是搭建好了，我本身是做android开发的，所以android studio 用的比较顺手，所以后面文章中开发工具默认就是指的android studio。

flutter初始工程

工程创建

前面再as中安装了flutter插件，所以再打开as的时候会有 Start a new Fluuter project 的选项，按照下面的顺序就可以创建flutter工程了

1. 点击 Start a new Fluuter project
2. 点击 Flutter Application
3. 填写 工程名字、flutter sdk 的路径、工程路径、工程简介
4. 填写 包名，这里还可以选择是否添加 kotlin 和 swift 的支持
5. 点击 finish 即可完成工程创建。

主要文件夹和文件

工程创建完成打开后，主要的文件夹和文件如下：

• android目录：这是存放android平台代码的目录
• ios目录：存放ios平台代码的目录
• lib目录：这个是重点，以后写的 dart 文件都是在这个目录下面，默认会有一个 main.dart 文件
• pubspec.yaml 文件：工程的配置文件，管理各种组件、字体、资源的依赖等。

这时候可以先不用着急看代码，点击运行，就可以在手机或者模拟其上跑起来了。第一次运行时间稍微长一些，后面会很快的，这个就是flutter提供的 hotreload 热重载特性，开发过程中确实特别爽，改动代码之后按下 crtl+s 即可自动更新到手机上运行。

下面咱们看下默认生成的 main.dart 文件和 pubspec.yaml 中的代码，前者是具体的业务代码文件，后者是app的配置文件以及管理库依赖、资源等

初始代码分析

main.dart 文件中的代码不多，但是注释很多，我这里把英文注释删掉，精简成了中文的。这里先把代码贴出来。

//导入 material 包，android material design 风格
import 'package:flutter/material.dart';

//这是 app 的入口
void main() => runApp(MyApp());

/**
 * flutter 中绝大多数东西都是 widget，主要有两种，无状态的（StatelessWidget）、有状态的（StatefulWidget）
 */
class MyApp extends StatelessWidget {
  // StatelessWidget 主要的就是这个 build 方法，主要用来执行 widget 的构建
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//MateriaApp 是flutter提供的android平台风格的库
      title: 'Flutter Demo',
      theme: ThemeData(//可以配置主题
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 有状态的 widget
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  //主要的方法就是 createState() ，用来创建一个 State
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

//这就是和上面 StatefulWidget 绑定的 State
class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    //有状态的widget，可以使用 setState 方法来更新状态，然后 widget 树会根据最新的状态重新构建
    setState(() {
      _counter++;
    });
  }

  //这是 State 的核心方法，用来执行 widget 的构建
  @override
  Widget build(BuildContext context) {
    return Scaffold(//Scaffold 是android 风格app的一个骨架 widget，里面可以配置 appbar等
      appBar: AppBar(
        // 这里的widget就是上面的MyHomePage对象
        title: Text(widget.title),
      ),
      body: Center(//一个单子元素在中间的布局widget
        child: Column(//竖直布局widget
          mainAxisAlignment: MainAxisAlignment.center,//主方向的对齐方式
          children: [//子元素列表
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

具体代码的含义在注释中已经说明，至于更详细的内容后面文章再说，这里只大概感受一下flutter代码，通过上面的代码中的注释基本上可以理解flutter开发的一个基本流程：

1. 导入依赖的包
2. 提供一个app入口方法实现 void main() => runApp(MyApp());
3. 根据需要使用 StatelessWidget 或者 StatefulWidget ，覆写内部的 build()/createState() 方法，方法中使用各种widget构建的app

下面来看 pubspec.yaml 文件，同样的是代码不多，注释很多，已经精简成中文，理解该文件的大概作用没问题。

需要注意的是在该文件编写时一定要注意缩进和空格！

# app 名字
name: flutter_app
# app 描述
description: A new Flutter application.

# 版本号 x.y.z+m 其中 m 是构建版本，可以使用 --build-name/--build-number 构建参数覆盖，在 android 中 build-name 当作 versionName使用，build-number 当作versionCode使用
version: 1.0.0+1

# flutter 环境配置
environment:
  sdk: ">=2.1.0 <3.0.0"

# 库依赖管理
dependencies:
  flutter:
    sdk: flutter

  # 一些第三方库，后续自己选择的库直接在下面添加即可
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter


# 下面是 flutter 的一些配置
flutter:

  # 使用android 平台的 material design 风格
  uses-material-design: true

  # 添加本地资源
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # 添加字体
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700

除了上述两个文件外，比较重要的就是平台相关的代码了，比如android平台对应的android目录中的文件，其实就是一个正常的as module，如果需要修改app的图标什么的或者需要和android原生平台通信，可以进入该目录修改添加相关代码，也可以在 android 目录上右键，点击 Flutter— open android module in android studio> 选项，启动一个心得as窗口，当成普通android module 编写代码，这就属于原生开发的范畴了，这里不再赘述。

总结

通过上面的步骤和介绍，到这里应该可以从感官层面理解flutter开发的一个基本流程，具体的内容后续文章会逐一讲解。

另外和文章开头提到的优惠券app鲸鱼精选 对应的还有一个微信小程序，可以扫下方二维码体验下，算是本人的一种支持吧，这里先行谢过~

鲸鱼精选