前言
-
Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開(kāi)發(fā)框架，正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，包括阿里的咸魚(yú)、騰訊的微信等。
示意圖 今天，我將獻(xiàn)上一份《全面 & 詳細(xì)的Flutter入門(mén)開(kāi)發(fā)攻略》，旨在讓你快速上手Flutter開(kāi)發(fā)，包括環(huán)境搭建、關(guān)鍵語(yǔ)法和示例講解，希望你們會(huì)喜歡。
示意圖
目錄
本文主要分文兩大部分：環(huán)境搭建 & 示例講解
Flutter環(huán)境搭建
此處搭建主要是基于Mac OS。
1. 安裝brew
- 定義：包管理工具，具體介紹可參考：官網(wǎng)地址
- 作用：方便進(jìn)行安裝 / 卸載 / 更新各種軟件包，如：本文提及的flutter、nodejs等等
- 應(yīng)用場(chǎng)景：快速搭建本地開(kāi)發(fā)環(huán)境
- 安裝：
命令行下運(yùn)行：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2. 下載Flutter SDK
- 下載地址：官網(wǎng)鏈接
示意圖
- 將下載的SDK解壓到本地目錄
3. 環(huán)境變量配置
命令行輸入以下文件
// 1. 打開(kāi)配置文件
open ~/.bash_profile
// 若不存在此文件，則直接新創(chuàng)建再打開(kāi)即可，終端輸入：
cd ~
touch .bash_profile
open ~/.bash_profile
// 2. 在打開(kāi)的配置文件下添加以下語(yǔ)句 & 保存
export PATH=/Users/carson.ho/AndroidStudioProjects/flutter/bin:$PATH // 注：.../bin 前需填寫(xiě)的是你剛才解壓flutter SDK的目錄
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
// 3. 生效配置
source ~/.bash_profile
4. 安裝Flutter插件（Flutter Plugin）
打開(kāi)Android Studio，按如圖下安裝Flutter Plugin：
示意圖
5. 環(huán)境檢查
終端命令行輸入
flutter doctor
若是用于Android場(chǎng)景，那么安裝成功提示如下：（若是iOS場(chǎng)景，則需安裝標(biāo)紅的地方）
示意圖
錯(cuò)誤處理：若存在報(bào)錯(cuò)，則按項(xiàng)進(jìn)行檢查即可：安裝對(duì)應(yīng)版本Android SDK & Android Studio。
可到此處進(jìn)行快速下載：http://www.androiddevtools.cn/
至此，關(guān)于Flutter的環(huán)境搭建講解完畢。
入門(mén)示例講解
此處將手把手帶你創(chuàng)建一個(gè)Flutter工程并進(jìn)行Demo展示，讓你快速入門(mén)Flutter。
步驟1：Android Studio創(chuàng)建Flutter工程
示意圖
示意圖
簡(jiǎn)單介紹每項(xiàng)：
- Flutter Application：標(biāo)準(zhǔn)的Flutter App工程，包含標(biāo)準(zhǔn)的Dart層與Native平臺(tái)層；
- Flutter Module：Flutter組件工程，僅包含Dart層實(shí)現(xiàn)，Native平臺(tái)層子工程為通過(guò)Flutter自動(dòng)生成的隱藏工程；
- Flutter Plugin：Flutter平臺(tái)插件工程，包含Dart層與Native平臺(tái)層的實(shí)現(xiàn)；
- Flutter Package：Flutter純Dart插件工程，僅包含Dart層的實(shí)現(xiàn)，往往定義一些公共Widget。
此處選擇Flutter Application進(jìn)行展示。
步驟2：工程結(jié)構(gòu)解析
示意圖
在Flutter上使用的代碼，主要是寫(xiě)在 main.dart文件上，即工程一旦運(yùn)行，是先執(zhí)行main.dart文件。
步驟3：實(shí)例代碼解析
- 本文直接采用Flutter官方Demo說(shuō)明，從而對(duì)Flutter的開(kāi)發(fā)進(jìn)行快速入門(mén)。
- 點(diǎn)擊main.dart即可看到Demo代碼，具體解析如下：
/**
* 1. 導(dǎo)入Material UI組件庫(kù)
**/
import 'package:flutter/material.dart';
// 定義：Material是Flutter 實(shí)現(xiàn) Material Design設(shè)計(jì)風(fēng)格(谷歌推出的一套視覺(jué)設(shè)計(jì)語(yǔ)言)的基礎(chǔ)包，
// 作用：包含文本輸入框(Text)、圖標(biāo)( Icon)、圖片(Image)、行排列布局( Row)、 列排列布局(Column)、 Decoration(裝飾器)、動(dòng)畫(huà)等組件
// 因此基本上每個(gè)flutter程序的代碼，第一行代碼都會(huì)引入這個(gè)包
/**
* 2. Flutter應(yīng)用的入口：runApp（），即首先執(zhí)行該函數(shù)
* 作用：將給定的組件(widget)顯示在屏幕上
* 注：若不使用runApp（），程序仍會(huì)正常運(yùn)行，但屏幕上什么都不會(huì)顯示，相當(dāng)于一個(gè)Dart控制臺(tái)程序
**/
void main() => runApp(MyApp());
// 等價(jià)于
// void main() {
// return runApp(MyApp());
// }
// 下面，將執(zhí)行MyApp -> 跳轉(zhuǎn)到3
/**
* 3. 自己定義的組件類MyApp，繼承自StatelessWidget
* 作用：整個(gè)應(yīng)用的底層Widget
* 注：StatelessWidget是無(wú)狀態(tài)組件，具體介紹請(qǐng)?zhí)隹锤戒?
**/
class MyApp extends StatelessWidget {
// build()：Widget中的生命周期方法
// 作用：描述如何構(gòu)建UI界面
// 關(guān)于其他生命周期方法，請(qǐng)看附錄2
@override
Widget build(BuildContext context) {
// Material App是一個(gè)使用Material Design設(shè)計(jì)風(fēng)格的應(yīng)用，具體介紹請(qǐng)看附錄3
// 此處設(shè)置了標(biāo)題、主題 & 要顯示的界面 -> MyHomePage -> 跳轉(zhuǎn)4
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
/**
* 4. 自己定義的組件類，繼承自StatefulWidget
* 作用：設(shè)置應(yīng)用打開(kāi)的顯示界面
* 注：StatefulWidget是有狀態(tài)組件，具體介紹請(qǐng)?zhí)隹锤戒?
**/
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
// 調(diào)用父類StatefulWidget的createState()，用于創(chuàng)建和StatefulWidget相關(guān)的狀態(tài) -> 跳轉(zhuǎn)5
}
/**
* 5. 繼承自State類
* 作用：實(shí)現(xiàn)一系列Widget生命周期方法 & 更新Widget的狀態(tài)，
* 注：StatefulWidget是有狀態(tài)組件，具體介紹請(qǐng)?zhí)隹锤戒?
**/
class _MyHomePageState extends State<MyHomePage> {
// 用于后續(xù)點(diǎn)擊按鈕統(tǒng)計(jì)
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
// build()：描述如何構(gòu)建UI界面
@override
Widget build(BuildContext context) {
// 此處直接采用Scaffold
// Scaffold實(shí)現(xiàn)了基本的 Material Dsign布局
// 只要是在 Material Design中定義過(guò)的單個(gè)界面顯示的布局組件元素，都可以使用Scaffold繪制
return Scaffold(
appBar: AppBar( // 顯示在界面頂部的AppBar
title: Text(widget.title),
),
body: Center( // 當(dāng)前界面顯示的主要內(nèi)容
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter', // 顯示的內(nèi)容是_counter變量
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton( // 即FAB，最常用的Widget組件 = 圓形按鈕
onPressed: _incrementCounter, // 設(shè)置點(diǎn)擊事件->調(diào)用_incrementCounter()
tooltip: 'Increment', // 長(zhǎng)按按鈕提示
child: Icon(Icons.add), // 按鈕的子視圖：“+”樣式
// 關(guān)于FAB還有更多的樣式 & 屬性設(shè)置，此處不做過(guò)多介紹
),
);
}
}
附錄1：StatelessWidget
- 定義：無(wú)狀態(tài)組件，繼承自widget類。
- 特點(diǎn)：無(wú)狀態(tài)、不可變，屬性不能改變
- 示例：例如Icon、IconButton、和Text
附錄2：Widget生命周期方法介紹
示意圖
示意圖
附錄3：Material App
- 定義：使用Material Design設(shè)計(jì)風(fēng)格的應(yīng)用
- 作用：包含了Material Design設(shè)計(jì)風(fēng)格的應(yīng)用所需要的基本控件
- 常用屬性：
示意圖
此處詳細(xì)列出主題（Theme）的設(shè)置
示意圖
附錄4：StatefulWidget
- 定義：有狀態(tài)組件，繼承自widget類。
- 特點(diǎn)：存在狀態(tài) & 隨著Widget生命周期發(fā)生變化
- 示例：如Checkbox、Radio、Slider、InkWell、Form、and、TextField
- 自定義：需繼承 & 實(shí)現(xiàn)兩個(gè)類
- StatefulWidget類：實(shí)現(xiàn)StatefulWidget的createState() = 創(chuàng)建和Statefulwidget相關(guān)的狀態(tài)
- State類：實(shí)現(xiàn)一系列Widget的生命周期方法，用于更新Widget的狀態(tài)，具體方法同附錄2：Widget生命周期方法介紹
請(qǐng)回到原代碼處
特別說(shuō)明：使用第三方功能庫(kù)
在實(shí)際開(kāi)發(fā)過(guò)程中，會(huì)使用到第三方功能庫(kù)，在Flutter中，使用第三方功能庫(kù)的步驟如下：
- 步驟1：使用pubspec.yaml文件進(jìn)行配置
在iOS中，使用CocoaPods；在Android中使用Gradle
示意圖
- 步驟2：獲取所需要的庫(kù)到工程中，通過(guò)終端命令行執(zhí)行：
// 步驟1：進(jìn)入到工程目錄
cd 工程目錄
// 步驟2：下載Flutter包
flutter packages get
至此，關(guān)于Flutter的開(kāi)發(fā)入門(mén)講解完畢。
總結(jié)
- 本文全面介紹了Flutter入門(mén)開(kāi)發(fā)學(xué)習(xí)知識(shí)，包括：環(huán)境搭建、關(guān)鍵語(yǔ)法和示例講解
- 接下來(lái)推出的文章，我將繼續(xù)講解Flutter的相關(guān)知識(shí)，包括使用語(yǔ)法、實(shí)戰(zhàn)等，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請(qǐng)點(diǎn)贊！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫(xiě)作的最大動(dòng)力！
相關(guān)文章閱讀
Android開(kāi)發(fā)：最全面、最易懂的Android屏幕適配解決方案
Android開(kāi)發(fā)：史上最全的Android消息推送解決方案
Android開(kāi)發(fā)：最全面、最易懂的Webview詳解
Android開(kāi)發(fā)：JSON簡(jiǎn)介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡(jiǎn)書(shū)！
不定期分享關(guān)于安卓開(kāi)發(fā)的干貨，追求短、平、快，但卻不缺深度。
