Flutter简介（一）

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仓库的依赖库，或者指定本地资源（图片、字体、音频、视频等）。

Flutter 与原生对比

Flutter和Android原生应用性能对比