之前寫過幾篇dart語言特性的文章,算是英文官方文檔的一個簡單翻譯,最近用 flutter 寫了一個領電商平臺優惠券的 app(還有微信小程序,之前的文章有),沒有上線,有興趣的可以點擊鏈接 鯨魚精選 下載看看。
最近幾個月網上的flutter博客文章增長的速度很快,而且簡單的flutter app開發確實技術含量不需要太高,所以挺糾結flutter方面的文章到底寫不寫。。。經過幾天的糾結之後,決定還是把flutter的文章寫下去吧,按自己的思路一篇一篇寫。
1 環境配置
從flutter環境配置起步,具體步驟可以參考 安裝和環境配置,描述的挺詳細的,這裏呢針對 windows + androidstudio 平臺寫幾點關鍵步驟和注意事項。
flutter sdk 下載
下載 windows 平臺對應的sdk壓縮包,截止到目前是 flutter_windows_v1.7.8+hotfix.4-stable.zip
添加 flutter 環境變量
選好位置解壓,將 sdk 中的 bin 目錄添加到環境變量
添加國內鏡像
如果不用國內鏡像的話,後面開發中使用依賴會下載的很慢很慢,甚至下載不下來。目前 flutter中文網 上提供了兩個鏡像地址:Flutter社區鏡像、上海交通大學Linux用戶組。推薦使用Flutter社區的鏡像,我之前用上海交大那個還是不行,特別慢,還總失敗。
使用方法是,新建兩個用戶或者系統變量,變量名分別爲 FLUTTER_STORAGE_BASE_URL、PUB_HOSTED_URL,對應的值分別是 https://storage.flutter-io.cn,https://pub.flutter-io.cn。
//Flutter 社區鏡像
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn
//上海交通大學 Linux 用戶組
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
配好國內鏡像之後,以後下載的依賴會放在 flutter\.pub-cache\hosted\pub.flutter-io.cn
文件夾中,如果開發中依賴下載不下來,可以看看有沒有該文件夾,如果沒有應該是鏡像配置有問題。
flutter 環境檢查
執行 flutter doctor
命令檢查flutter的環境,一般都會提示幾個問題
- Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
:這種是因爲android sdk和buildtoos版本低導致的,打開AS,更新到錯誤信息裏面描述的具體版本即可 - Android license status unknown:錯誤中有提示,運行
flutter doctor --android-licenses
命令即可,有提示輸入 y 即可。 - 電腦上如果有安裝 android studio/vscode/idea 的話,會提示這個ide工具沒有安裝 flutter 插件,android studio上打開 setting 界面的 plugin 界面,搜索 flutter ,點擊安裝,完成後重啓即可。你使用那個ide工具開發就解決哪一個就行,其他工具的報錯可以不用管。
經過以上幾步,flutter的環境就算是搭建好了,我本身是做android開發的,所以android studio 用的比較順手,所以後面文章中開發工具默認就是指的android studio。
flutter初始工程
工程創建
前面再as中安裝了flutter插件,所以再打開as的時候會有 Start a new Fluuter project
的選項,按照下面的順序就可以創建flutter工程了
- 點擊
Start a new Fluuter project
- 點擊
Flutter Application
- 填寫 工程名字、flutter sdk 的路徑、工程路徑、工程簡介
- 填寫 包名,這裏還可以選擇是否添加 kotlin 和 swift 的支持
- 點擊 finish 即可完成工程創建。
主要文件夾和文件
工程創建完成打開後,主要的文件夾和文件如下:
- android目錄:這是存放android平臺代碼的目錄
- ios目錄:存放ios平臺代碼的目錄
- lib目錄:這個是重點,以後寫的 dart 文件都是在這個目錄下面,默認會有一個 main.dart 文件
- pubspec.yaml 文件:工程的配置文件,管理各種組件、字體、資源的依賴等。
這時候可以先不用着急看代碼,點擊運行,就可以在手機或者模擬其上跑起來了。第一次運行時間稍微長一些,後面會很快的,這個就是flutter提供的 hotreload 熱重載特性,開發過程中確實特別爽,改動代碼之後按下 crtl+s 即可自動更新到手機上運行。
下面咱們看下默認生成的 main.dart 文件和 pubspec.yaml 中的代碼,前者是具體的業務代碼文件,後者是app的配置文件以及管理庫依賴、資源等
初始代碼分析
main.dart 文件中的代碼不多,但是註釋很多,我這裏把英文註釋刪掉,精簡成了中文的。這裏先把代碼貼出來。
//導入 material 包,android material design 風格
import 'package:flutter/material.dart';
//這是 app 的入口
void main() => runApp(MyApp());
/**
* flutter 中絕大多數東西都是 widget,主要有兩種,無狀態的(StatelessWidget)、有狀態的(StatefulWidget)
*/
class MyApp extends StatelessWidget {
// StatelessWidget 主要的就是這個 build 方法,主要用來執行 widget 的構建
@override
Widget build(BuildContext context) {
return MaterialApp(//MateriaApp 是flutter提供的android平臺風格的庫
title: 'Flutter Demo',
theme: ThemeData(//可以配置主題
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// 有狀態的 widget
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
//主要的方法就是 createState() ,用來創建一個 State
@override
_MyHomePageState createState() => _MyHomePageState();
}
//這就是和上面 StatefulWidget 綁定的 State
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
//有狀態的widget,可以使用 setState 方法來更新狀態,然後 widget 樹會根據最新的狀態重新構建
setState(() {
_counter++;
});
}
//這是 State 的核心方法,用來執行 widget 的構建
@override
Widget build(BuildContext context) {
return Scaffold(//Scaffold 是android 風格app的一個骨架 widget,裏面可以配置 appbar等
appBar: AppBar(
// 這裏的widget就是上面的MyHomePage對象
title: Text(widget.title),
),
body: Center(//一個單子元素在中間的佈局widget
child: Column(//豎直佈局widget
mainAxisAlignment: MainAxisAlignment.center,//主方向的對齊方式
children: <Widget>[//子元素列表
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
具體代碼的含義在註釋中已經說明,至於更詳細的內容後面文章再說,這裏只大概感受一下flutter代碼,通過上面的代碼中的註釋基本上可以理解flutter開發的一個基本流程:
- 導入依賴的包
- 提供一個app入口方法實現
void main() => runApp(MyApp());
- 根據需要使用 StatelessWidget 或者 StatefulWidget ,覆寫內部的 build()/createState() 方法,方法中使用各種widget構建的app
下面來看 pubspec.yaml 文件,同樣的是代碼不多,註釋很多,已經精簡成中文,理解該文件的大概作用沒問題。
需要注意的是在該文件編寫時一定要注意縮進和空格!
# app 名字
name: flutter_app
# app 描述
description: A new Flutter application.
# 版本號 x.y.z+m 其中 m 是構建版本,可以使用 --build-name/--build-number 構建參數覆蓋,在 android 中 build-name 當作 versionName使用,build-number 當作versionCode使用
version: 1.0.0+1
# flutter 環境配置
environment:
sdk: ">=2.1.0 <3.0.0"
# 庫依賴管理
dependencies:
flutter:
sdk: flutter
# 一些第三方庫,後續自己選擇的庫直接在下面添加即可
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
# 下面是 flutter 的一些配置
flutter:
# 使用android 平臺的 material design 風格
uses-material-design: true
# 添加本地資源
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# 添加字體
# 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
除了上述兩個文件外,比較重要的就是平臺相關的代碼了,比如android平臺對應的android目錄中的文件,其實就是一個正常的as module,如果需要修改app的圖標什麼的或者需要和android原生平臺通信,可以進入該目錄修改添加相關代碼,也可以在 android 目錄上右鍵,點擊 Flutter— open android module in android studio>
選項,啓動一個心得as窗口,當成普通android module 編寫代碼,這就屬於原生開發的範疇了,這裏不再贅述。
總結
通過上面的步驟和介紹,到這裏應該可以從感官層面理解flutter開發的一個基本流程,具體的內容後續文章會逐一講解。
另外和文章開頭提到的優惠券app鯨魚精選 對應的還有一個微信小程序,可以掃下方二維碼體驗下,算是本人的一種支持吧,這裏先行謝過~