Flutter 是什么？

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
以上是官方的说法，从我实际的使用体验来看，官方说法还算中肯。以下是我个人的一些理解
一、 Flutter 是谷歌的，有谷歌爸爸在，心里稍微有底了，不会搞着搞着就没人维护了。
二、是一个移动 UI 框架，这里的重点是 UI ，Flutter 的优势在于搭建 UI 界面，举个简单的例子：

import 'package:flutter/material.dart'; // 安卓样式控件库

void main() => runApp(new MyApp()); // 入口

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { // 页面
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold( 
        appBar: new AppBar( // 导航栏
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

以上是一个可以跑在 iOS 和 安卓和其他提供支持的平台的，hello world 界面，简单几行代码，就把一个功能界面绘制出来了。虽然看起来结构简单了，但是在构建复杂页面的时候，怎么组织代码，同样需要好好斟酌，所以对各平台的熟手来说，这个算不了什么优势，Flutter 的优势在于，他提供 JIT 和 AOT 两种编译模式，在开发阶段，我们需要频繁的编译运行代码，然后才能看到代码调整过后的效果，这个过程消耗了大量时间，调试 Flutter 项目的时候，使用 JIT 模式编译代码，可以热重载，能大幅提升开发效率。出包的时候，选用 AOT 模式，能获得接近原生效果。
三、总体来说，Flutter 和 已有项目的混编效果还不错，Flutter 以 controller （iOS），View、fragment（Android）对象的形式存在于已有的项目中，可以自由的组合，Flutter 模块和原生项目可以通过 Flutter 提供的 channel 通信，通过 channel 可以实现方法调用，通知等功能。
四、Flutter 完全开源，所有源码都能在 github 找到，Flutter源码。
四、业界案例
目前运用 Flutter 框架在实战中的项目，我已知的运用面最大的是闲鱼，从实际效果来看，Flutter 在移动端的运用的实际效果很不错，各种复杂页面的流畅度可以媲美原生效果。
闲鱼技术博客

Flutter 怎么用

一、环境配置

• 下载 Flutter 到本地（zip or git）并解压
• 打开(或创建) $HOME/.bash_profile.
• 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径，比如“~/code”

• 在终端中运行 echo $PATH ，检测是否添加成功
• 在终端运行 flutter doctor 检测设置，并更加提示补充相关配置
  在macOS上搭建Flutter开发环境

二、IDE

VSCode(轻量级编辑器，支持Flutter运行和调试.)

配置

1. 安装 vscode
2. 启动 VS Code
3. 调用 View>Command Palette…（command+shift+p）
4. 输入 ‘install’, 然后选择 Extensions: Install Extension action
5. 在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install
6. 选择 ‘OK’ 重新启动 VS Code

创建应用

1. 启动 VS Code
2. 调用 View>Command Palette…
3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
4. 输入 Project 名称 (如myapp), 然后按回车键
5. 指定放置项目的位置，然后按蓝色的确定按钮
6. 等待项目创建继续，并显示main.dart文件

运行应用

1. 按 F5 键或调用Debug>Start Debugging或者再vscode自带的终端输入 flutter run
2. 等待应用程序启动
3. 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序；

热重载

1. 通过终端运行的工程，在完成修改后，在终端输入‘r’，即可。
2. 通过IDE运行的项目，调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮)。

Android Studio

安装Flutter和Dart插件

Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).

1. 打开插件首选项 (Preferences>Plugins on macOS,
2. File>Settings>Plugins on Windows & Linux).
3. 选择 Browse repositories…, 选择 Flutter 插件并点击 install.
4. 重启Android Studio后插件生效.

创建应用

1. 选择 File>New Flutter Project
2. 选择 Flutter application 作为 project 类型, 然后点击 Next
3. 输入项目名称 (如 myapp), 然后点击 Next
4. 点击 Finish
5. 等待Android Studio安装SDK并创建项目.

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中，您应用程序的代码位于 lib/main.dart.

运行应用

1. 定位到Android Studio 工具栏:

   
   

2. 在 target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用，请选择 Tools>Android>AVD Manager 并在那里创建一个

3. 在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.

4. 如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序；

热重载
调用 Save All (cmd-s / ctrl-s), 或点击 热重载按钮 (带有闪电⚡️图标的按钮)。

Terminal + 编辑器

创建新的应用

1. 使用 flutter create 命令创建一个project:

$ flutter create myapp
$ cd myapp

上述命令创建一个Flutte让项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中，您的应用程序的代码位于 lib/main.dart.

运行应用程序

• 检查Android设备是否在运行。如果没有显示, 请参照 设置.

$ flutter devices

• 运行 flutter run 命令来运行应用程序:

$ flutter run

• 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序。

三、项目目录结构

• 相关平台模块，包含一个完整的对应平台工程，运行到真机或者打包，需要进行一些必要配置，比如iOS的证书配置，Android的gradle配置。

images

• 自己创建的，存放图片资源的文件夹，在项目中使用图片资源，需要在 pubspec.yaml 文件中添加依赖

flutter:
  uses-material-design: true
  assets:                   // 新增项
  - images/feed_comment.png // 新增项

build

• 调试过程中，生成的文件

lib

• 存放 dart 语言编写的代码，即 Flutter 项目的核心代码目录。

pubspec.yaml

• 配置依赖项的文件，比如配置远程pub仓库的依赖库，或者指定本地资源（图片、字体、音频、视频等）。

Flutter 与原生对比

Flutter和Android原生应用性能对比