1. 簡(jiǎn)介
flutter是谷歌在2017年推出的移動(dòng)端跨平臺(tái)，高性能移動(dòng)應(yīng)用框架烫止。其是通過(guò)dart語(yǔ)言進(jìn)行開(kāi)發(fā)。
主要功能：跨平臺(tái)戳稽，支持iOS馆蠕，安卓，web惊奇。開(kāi)發(fā)中支持熱重載互躬，提高開(kāi)發(fā)效率。
不支持功能：熱更新颂郎。
2. mac安裝步驟
- 在github上面下載flutter SDK, 放大本地指定文件夾吼渡。例如 "~/Library/flutter"
- 在 "vim ~/.bash_profile" 或者"vim ~/.zshrc"中添加flutter配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Library/flutter/bin:$PATH
- 配置Java環(huán)境，在 "vim ~/.bash_profile" 或者"vim ~/.zshrc"中添加Java環(huán)境乓序。
JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_301.jdk/Contents/Home"
export JAVA_HOME
CLASS_PATH="$JAVA_HOME/lib"
PATH=".$PATH:$JAVA_HOME/bin"
- 下載xcode和Android studio編譯器
- 運(yùn)行 "flutter doctor", 有錯(cuò)誤的話寺酪，區(qū)網(wǎng)上搜索解決一下
- android studio中，通過(guò) "Preference" => "Plugins" 下載dart和flutter插件替劈。
3. 簡(jiǎn)單例子
使用android studio創(chuàng)建 "Create New Flutter Project"寄雀，并且選擇Flutter App，按照下一步選擇項(xiàng)目路徑和語(yǔ)言抬纸，完成即可咙俩。
-
新項(xiàng)目框架如圖：
新項(xiàng)目架構(gòu)
主要邏輯都是在lib文件夾里面編寫(xiě)。主文件是lib/main.dart文件。
- 初始項(xiàng)目包含一個(gè)計(jì)數(shù)器的項(xiàng)目阿趁，功能是通過(guò)點(diǎn)擊界面浮動(dòng)按鈕膜蛔，獲取點(diǎn)擊次數(shù)。通過(guò)項(xiàng)目可以簡(jiǎn)單了解一下flutter語(yǔ)法脖阵。
// 主程序入口
void main() {
runApp(MyApp());
}
// 創(chuàng)建一個(gè)StatelessWidget頁(yè)面皂股。
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// 主題主色調(diào)，具體theme后期會(huì)介紹命黔。
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
// 常量呜呐，final常量可以后期賦值一次。const需要聲明時(shí)賦值悍募。
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
// 私有方法
void _incrementCounter() {
// 狀態(tài)改變蘑辑，通過(guò)setState，狀態(tài)更新坠宴，頁(yè)面刷新
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// 常用頁(yè)面布局
return Scaffold(
// 導(dǎo)航欄
appBar: AppBar(
title: Text(widget.title),
),
body: Center( // 頁(yè)面顯示
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
4. 項(xiàng)目介紹
- 此項(xiàng)目分為iOS和android兩個(gè)移動(dòng)端展示洋魂，如果需要在iOS端運(yùn)行，需要先使用xcode進(jìn)入iOS項(xiàng)目喜鼓，選擇好開(kāi)發(fā)者證書(shū)副砍，設(shè)置好Bundle Identifier。
- *pubspec.yaml文件時(shí)項(xiàng)目配置信息庄岖，主要是設(shè)置項(xiàng)目名稱豁翎，版本號(hào)，描述等隅忿⌒陌可以設(shè)置flutter的環(huán)境。
dependencies:
flutter:
sdk: flutter
# 添加第三方框架
# 設(shè)置資源文件硼控，圖片
# 需要在根目錄下面添加**images/**文件夾
assets:
- images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
5. 常用架構(gòu)介紹
本人學(xué)習(xí)時(shí)根據(jù)自己思想設(shè)置架構(gòu)刘陶，僅供參考。
flutter開(kāi)發(fā)架構(gòu)
- util: 常用的工具類牢撼，例：date時(shí)間轉(zhuǎn)換匙隔， 正則表達(dá)式驗(yàn)證等共有方法。
- api: dio網(wǎng)絡(luò)請(qǐng)求封裝熏版。
- base: 基礎(chǔ)依賴纷责，例如：全局時(shí)間狀態(tài)設(shè)置。scheme撼短。 provider狀態(tài)設(shè)置再膳。
- common: 全局設(shè)置公有數(shù)據(jù)。登錄信息曲横，config, global全局配置喂柒， 網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)設(shè)置基礎(chǔ)數(shù)據(jù)等不瓶。
- routes: 頁(yè)面路由設(shè)置。
- sences: 頁(yè)面顯示灾杰，根據(jù)模塊展示mvvm模式蚊丐。
- webView：設(shè)置網(wǎng)頁(yè)跳轉(zhuǎn)公有webView。
flutter初學(xué)總結(jié)艳吠，如有什么問(wèn)題麦备，歡迎評(píng)論指出。
