Flutter 的第一次尝试

什么是 Flutter?

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

Flutter中文网

Flutter 具有很多的优点，比如混合开发，能够一套代码发布到Android和iOS上，快速开发等功能，但最吸引我的是它有着很多核心的widget,而这些都可以在iOS和Android上达到原生应用一样的性能，这就让人感到很惊艳。

根据官网的描述，Flutter具有以下特性：

快速开发，支持iOS和Android真机和模拟器上热重载，不会丢失状态；
统一的应用开发体验和丰富的UI控件，包括Android的Material Design风格和iOS的Cupertino Widget；
现代，响应式框架可以轻松构建用户界面，且支持强大灵活的API(如2D、动画、手势、效果等)
能够通过编写平台通道访问原生的系统功能和复用现有的java或oc代码。

当然，由于 Flutter 使用了新的 Dart 语言，所以新的开发者可能需要熟悉这套语言的特性和风格才能上手。

安装

flutter 的安装在官方网站上已经写得很详细了，甚至很细心的为国内开发者提供了国内镜像版（笑）。这里就简单的介绍下基本流程。

首先是将中国国内的镜像地址加入环境变量中，

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

获取Flutter SDK，可以直接去官方的下载页面下载,也可以直接去Github上直接拉取；
将sdk下的一些工具添加到环境变量中；
利用 flutter doctor 命令检查各个依赖安装的完整性。
比如这样子

flutter doctor.png

说明我当前已安装 Flutter SDK（vo.6.2）,已安装Android Studio 上 Flutter 的开发依赖工具，未安装xcode上的 Fluttr 开发依赖工具，已连接的可用设备数量为1
在 Android Studio 上安装 Flutter 和 Dart 插件，在Android Studio的插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)中的 repositories 中可以找到；
在 VS Code中调用 View>Command Palette… 输入 ‘install’, 然后选择 Extensions: Install Extension action。在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

体验

以上的准备工作做完后，可以直接在 Android Studio 中选择 Flutter applicaiton 作为项目类型来创建一个Flutter工程。等IDE创建完毕后，直接运行应用就能跑起来了。

程序的入口函数在项目->lib->main.dart文件中

import 'package:flutter/material.dart';
import 'splash.dart';
import 'index.dart';
import 'videodetail.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.green,
      ),
      home: new SplashPage(key: key),
      routes: <String, WidgetBuilder>{
        '/index': (BuildContext context) => new MyHomePage(title: '首页'),
        '/splash': (BuildContext context) => new SplashPage(key: key),
        '/play': (BuildContext context) => new VideoPlayPage(),
      },
    );
  }
}

其中的void main() => runApp(new MyApp());就是项目的入口了。

在这里，要提一下这个概念：在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)，甚至动画都可以通过AnimatedWidget类来实现。而Flutter的页面则是由这些 widget 元素堆叠而成，不再与原生的页面布局等同概念了。

Flutter布局机制的核心就是widget。在Flutter中，几乎所有东西都是一个widget - 甚至布局模型都是widget。您在Flutter应用中看到的图像、图标和文本都是widget。甚至你看不到的东西也是widget，例如行（row）、列（column）以及用来排列、约束和对齐这些可见widget的网格（grid）。
与此同时，为了方便开发者的使用，官方为开发者提供了大量的可用的Widget部件，包括 Android和iOS风格的都有。

flutter widgets.png

具体的内容可以查看 Flutter 官方介绍。

配置

在项目下的pubspec.yaml则是整个 Flutter 项目的配置文件，它里面包括了应用名，版本号，开发环境，工程依赖，资源文件等要素。

name: flutter_app
description: A new Flutter application.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# Read more about versioning at semver.org.
version: 1.0.0+1

environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  image_picker: ^0.4.7
  device_info: ^0.2.0
  video_player: ^0.6.4

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/about.png
    - images/home.png
    - images/ic_avatar_default.png
    

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.io/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.io/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.io/custom-fonts/#from-packages

构建发布

首先是签名的问题，在Android Studio上的配置方式与用Gradle配置签名打包的方式一样，都是通过修改build.gradle文件配置。

signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}

签名配置完毕后，使用命令行运行 flutter build apk进行打包。（需要位于工程目录下，flutter build 默认会包含 --release选项，打包好的发布APK位于工程目录下/build/app/outputs/apk/app-release.apk。）

结语

Flutter包括一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具。哪怕是编程的初学者也能很好的上手整个Flutter框架、帮助快速地设计、构建、测试和调试应用程序。最后，记住 Flutter 的核心原则：一切皆为widget

试试 Flutter

试试 Flutter

Flutter 的第一次尝试

安装

体验

配置

构建发布

结语