简介

移动端项目里难免有需要两端同时开发的场景，两端开发弊端就不说了，成熟的替代方案有weex和flutter，今天简单说一下Flutter的使用。

构建项目

基础的SDK下载等就直接略过了，假设各位同学已经下载好了SDK，并解压了出来

配置 flutter 的 PATH 环境变量：
可以简单的让当前终端生效

export PATH="$PATH:`pwd`/flutter/bin"

也可以让所有终端生效: macOS Catalina 操作系统默认使用 Z Shell，所以需要修改 $HOME/.zshrc 文件。在文件最下边增加

export PATH="$PATH: "你自己的SDK路径" /bin"

2.刷新当前终端

 source $HOME/.bash_profile

3.验证 flutter 是否可用，执行下面的命令：

which flutter

4.打开VSCode并选择一个simulator（当然真机也可以, 需要一些额外的配置）

选择simulator

5.创建一个引导项目

flutter create my_app

这样一个简单的项目就创建好了。

项目结构浅析

大体的功能是这样的

Flutter项目结构

可以看到我们接着要做的就是打开目录下main.dart文件。

开始愉快的代码之旅

首先了解下基础的Dart知识

Flutter 所有的组件都是widget
app就是把widget组合在一起
所有的dart都是从这里开始的

void main() {
  runApp(const MyApp());
}

runApp只是代表我想从这个widget开始运行App
我们需要声明这个(class) widget是什么样子

声明widget: 如下所示

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

  @override
  Widget build(BuildContext context) {
    return     ··· ;
  }
}

大部分widget都只有一个方法: build , 用来返回一个widget
5.使用外部package
package可以到pub.dev.com找到并安装，使用package需要在podspec.yaml中添加依赖:

dev_dependencies:
xxx:^1.0.0

然后在main.dart文件中引入package

import 'package:english_words/english_words.dart';

Stateless widgets
无状态widgets 是不可变的，这意味着它们的属性不能更改。
Stateful widgets
有状态widgets 维护在小部件的生命周期内可能更改的状态。实现有状态widgets至少需要两个类，一个创建State类实例的 StatefulWidget类，另一个是State类，StatefulWidget对象本身是不可变的，可以丢弃并重新生成，但是State对象在小部件的生命周期内保持不变。

class A extends StatefulWidget {
  @override
  _AState createState() => _AState();
}

class _AState extends State<A> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

8.动态的生成widget的值
可以在 _AState的build() 方法中根据需要返回具有不同状态的widget。其中someFunc是自己定义的某个生成动态widget的函数

class _AState extends State<A> {
  @override
  Widget build(BuildContext context) {
     return Scaffold (         
      appBar: AppBar(
        title: const Text(''),
      ),
      body: _someFunc(),
    );                
  }
}