【Flutter】初识Flutter

发表于 | 分类于
| 字数统计 1.6k 字 | 阅读时长 6 分钟

一、Flutter是什么？

官网介绍：
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

总结：

  • Flutter是一个UI SDK（Software Development Kit）
  • 可以进行移动端（iOS、Android），Web端（Beta），桌面（technical preview），跨平台解决方案；
  • 到Flutter的几个特点：美观、快速、高效、开放。

二、Flutter的特点

快速开发

  • 毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。
  • Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。

美观：富有表现力和灵活的UI

  • 使用Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。




原生性能

  • Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。
  • Hot Reload (热重载) ，在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的
  • Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度；
  • Flutter 引擎使用 C++ 编写，包括高效的 Skia 2D 渲染引擎，Dart 运行时和文本渲染库；

响应式框架

  • 使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）解决艰难的UI挑战。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    class CounterState extends State<Counter> {
      int counter = 0;

      void increment() {
        // 告诉Flutter state已经改变, Flutter会调用build()，更新显示
        setState(() {
          counter++;
        });
      }

      Widget build(BuildContext context) {
        // 当 setState 被调用时，这个方法都会重新执行.
        // Flutter 对此方法做了优化，使重新执行变的很快
        // 所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget
        return new Row(
          children: <Widget>[
            new RaisedButton(
              onPressed: increment,
              child: new Text('Increment'),
            ),
            new Text('Count: $counter'),
          ],
        );
      }
    }

开放

  • Flutter 是开放的，它是一个完全开源的项目。

三、跨平台解决方案

WebView

  • 基于 JavaScript 和 WebView的跨平台
  • 主要是通过HTML来构建自己的界面，再将其显示在各个
    平台的WebView中。
  • 但是它默认是不能调用本地的一些服务的（比如自定义相机、
    蓝牙等），所以需要通过JavaScript进行桥接调用Native
    的一些代码来完成某些功能。
  • 但是，它本身的体验、性能都并不理想，而且开发过程
    中的坑非常多。

ReactNative（简称：RN）

  • ReactNative在移动端一直备受欢迎，在Flutter出现之前，很多跨平台项目都在使用，最著名的Airbnb对RN的社区贡献特别大，但是在18年突然宣布停止使用RN，改用Native；
  • RN使用JavaScript语言，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
  • 并且在保留基本渲染能力的基础上，用原生自带的UI组件实现核
    心的渲染引擎，从而保证了良好的渲染性能。
  • 但是，由于RN的本质是通过JavaScript VM调用原生接口，通信
    相对比较低效，而且框架本身不负责渲染，而是是间接通过原生
    进行渲染的，所以很多项目开发也在寻找其他的跨平台解决方案。

Flutter

  • 目前性能和体验最好的跨平台解决方案；
  • Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件
  • Android操作系统中，我们编写的原生控件实际上也是依赖于Skia进行绘制，所以flutter在某些Android操作系统上甚至还要高 于原生（因为原生Android中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的）
  • 而类似于RN的框架，必须通过某些桥接的方式先转成原生进行调用，之后再进行渲染。

四、Flutter环境配置及安装

Flutter SDK下载地址

环境变量配置（以Mac为例）

1
2
3
export FLUTTER_HOME=/Applications/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin

配置镜像

  • 由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中
    1
    2
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn
  • 参考：https://flutterchina.club/get-started/install/

可参考本机环境变量配置

1
2
3
4
5
6
7
8
9
export PATH=/Users/Developer/Applications/flutter/flutter/bin:$PATH

#android sdk目录，替换为你自己的即可
export ANDROID_HOME="/Users/Developer/Applications/android_sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

五、开发工具选择

  • 官方推荐：Android Studio 和 VSCode
  • 不管选择哪一个开发工具，把对应的插件安装即可–Flutter和Dart

六、创建Flutter项目

  • 有两种方式创建Flutter应用：终端或编辑器（我们以终端为例）

创建：
flutter create helloflutter

  • 项目名称不支持驼峰
  • 如果需要，名字之间可以使用下划线_分割（hello_flutter）

运行：
flutter run –d 模拟器id

  • 如果有多个模拟器同时运行，需要指定模拟器的id，
  • 如果只有一个模拟器在运行，则不需要指定id，直接运行flutter run即可

诊断：flutter doctor

  • 运行此命令查看是否需要安装其它依赖项来完成安装：