試試 Flutter

摘要： Flutter 的第一次嘗試 什麼是 Flutter? Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且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

1. 獲取Flutter SDK，可以直接去官方的下載頁面下載,也可以直接去Github上直接拉取；
2. 將sdk下的一些工具新增到環境變數中；
3. 利用 flutter doctor 命令檢查各個依賴安裝的完整性。
   比如這樣子
   
   

   flutter doctor.png

   說明我當前已安裝 Flutter SDK（vo.6.2）,已安裝Android Studio 上 Flutter 的開發依賴工具，未安裝xcode上的 Fluttr 開發依賴工具，已連線的可用裝置數量為1
4. 在 Android Studio 上安裝 Flutter 和 Dart 外掛，在Android Studio的外掛首選項 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)中的 repositories 中可以找到；
5. 在 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 官方介紹。

配置

在專案下的 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