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运行和调试.)
配置
- 安装 vscode
- 启动 VS Code
- 调用 View>Command Palette…（command+shift+p）
- 输入 ‘install’, 然后选择 Extensions: Install Extension action
- 在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install
- 选择 ‘OK’ 重新启动 VS Code
创建应用
- 启动 VS Code
- 调用 View>Command Palette…
- 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
- 输入 Project 名称 (如myapp), 然后按回车键
- 指定放置项目的位置，然后按蓝色的确定按钮
- 等待项目创建继续，并显示main.dart文件
运行应用
- 按 F5 键或调用Debug>Start Debugging或者再vscode自带的终端输入 flutter run
- 等待应用程序启动
- 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序；
热重载
- 通过终端运行的工程，在完成修改后，在终端输入‘r’，即可。
- 通过IDE运行的项目，调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮)。
Android Studio
安装Flutter和Dart插件
Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).
- 打开插件首选项 (Preferences>Plugins on macOS,
- File>Settings>Plugins on Windows & Linux).
- 选择 Browse repositories…, 选择 Flutter 插件并点击 install.
- 重启Android Studio后插件生效.
创建应用
- 选择 File>New Flutter Project
- 选择 Flutter application 作为 project 类型, 然后点击 Next
- 输入项目名称 (如
myapp), 然后点击 Next - 点击 Finish
- 等待Android Studio安装SDK并创建项目.
上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。
在项目目录中，您应用程序的代码位于 lib/main.dart.
运行应用
-
定位到Android Studio 工具栏:
在 target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用，请选择 Tools>Android>AVD Manager 并在那里创建一个
在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.
如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序；
热重载
调用 Save All (cmd-s / ctrl-s), 或点击 热重载按钮 (带有闪电⚡️图标的按钮)。
Terminal + 编辑器
创建新的应用
- 使用
flutter create命令创建一个project:
$ flutter create myapp
$ cd myapp
上述命令创建一个Flutte让项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。
在项目目录中，您的应用程序的代码位于 lib/main.dart.
运行应用程序
- 检查Android设备是否在运行。如果没有显示, 请参照 设置.
$ flutter devices
- 运行
flutter run命令来运行应用程序:
$ flutter run
- 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序。
三、项目目录结构
.android/.ios
- 相关平台模块，包含一个完整的对应平台工程，运行到真机或者打包，需要进行一些必要配置，比如iOS的证书配置，Android的gradle配置。
images
- 自己创建的，存放图片资源的文件夹，在项目中使用图片资源，需要在 pubspec.yaml 文件中添加依赖
flutter:
uses-material-design: true
assets: // 新增项
- images/feed_comment.png // 新增项
build
- 调试过程中，生成的文件
lib
- 存放 dart 语言编写的代码，即 Flutter 项目的核心代码目录。
pubspec.yaml
- 配置依赖项的文件，比如配置远程pub仓库的依赖库，或者指定本地资源（图片、字体、音频、视频等）。
