Android开发日记(二十二)—— Flutter 的第一次尝试

Flutter 的第一次尝试

什么是 Flutter?

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

Flutter中文网

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

根据官网的描述,Flutter具有以下特性:

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

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

安装

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

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

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

  2. 获取Flutter SDK,可以直接去官方的下载页面下载,也可以直接去Github上直接拉取;

  3. 将sdk下的一些工具添加到环境变量中;
  4. 利用 flutter doctor 命令检查各个依赖安装的完整性。
    比如这样子
    flutter doctor
    说明我当前已安装 Flutter SDK(vo.6.2),已安装Android Studio 上 Flutter 的开发依赖工具,未安装xcode上的 Fluttr 开发依赖工具,已连接的可用设备数量为1
  5. 在 Android Studio 上安装 Flutter 和 Dart 插件,在Android Studio的插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)中的 repositories 中可以找到;
  6. 在 VS Code中 调用 View>Command Palette… 输入 ‘install’, 然后选择 Extensions: Install Extension action。在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

体验

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

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

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
26
27
28
29
30
31
32
33
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

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

配置

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

1
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文件配置。

1
2
3
4
5
6
7
8
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