之前写过几篇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的环境，一般都会提示几个问题
- Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
：这种是因为android sdk和buildtoos版本低导致的，打开AS，更新到错误信息里面描述的具体版本即可 - Android license status unknown：错误中有提示，运行
flutter doctor --android-licenses命令即可，有提示输入 y 即可。 - 电脑上如果有安装 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工程了
- 点击
Start a new Fluuter project - 点击
Flutter Application - 填写 工程名字、flutter sdk 的路径、工程路径、工程简介
- 填写 包名，这里还可以选择是否添加 kotlin 和 swift 的支持
- 点击 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<MyHomePage> {
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: <Widget>[//子元素列表
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开发的一个基本流程：
- 导入依赖的包
- 提供一个app入口方法实现
void main() => runApp(MyApp()); - 根据需要使用 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鲸鱼精选 对应的还有一个微信小程序，可以扫下方二维码体验下，算是本人的一种支持吧，这里先行谢过~
鲸鱼精选
网友评论