2019-05-06
目錄：
- Flutter
- 搭建環(huán)境
- 實現(xiàn)第一個功能
- 遇到的問題
- 總結
1. Flutter
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界箱沦，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用磷支，并且Flutter是完全免費侯繁、開源的膝昆。
優(yōu)點：
[1] 快速開發(fā)
我是一個在任務完成上追求速度的人组贺，很喜歡快速完成一個任務時的成就感凸舵，所以這是我選擇 Flutter 的一個關鍵原因失尖。毫秒級的熱重載啊奄，修改后，應用界面會立即更新掀潮。這真的是太棒了菇夸！親自體驗過，真的超級鐘意～
[2] 富有表現(xiàn)力和靈活的UI
一直都很喜歡 Material Design Style , 也一直認為作為一個程序媛應該有美的概念和對美的欣賞仪吧，F(xiàn)lutter 提供的 UI 的表現(xiàn)力很強而且很靈活庄新。
[3] 原生性能
在我剛畢業(yè)之初，H5 開發(fā)很熱門薯鼠，后來微信小程序也占據(jù)了一定的熱度择诈，但我還是堅持在原生 app 開發(fā)的行列，因為我體驗過這兩種程序出皇，相比較原生羞芍，原生的更為流暢，微信小程序還會有一個很嚴重的問題郊艘，就是當小程序卡頓了荷科，會連帶微信無響應，提醒用戶關閉程序或者等待暇仲。然而步做，F(xiàn)lutter包含了許多核心的widget，如滾動奈附、導航全度、圖標和字體等，這些都可以在iOS和Android上達到原生應用一樣的性能斥滤。
---Flutter
2. 搭建環(huán)境
[1] Mac Air 筆記本一臺
[2] Android Studio 3.1.1 已安裝
[3] Flutter SDK 下載-->安裝-->配置環(huán)境變量 教程
1.下載 Flutter
image.png
- 打開 Terminal
輸入 vi ./.bash_profile将鸵，回車；
回車（查看模式）佑颇；
輸入“i”顶掉，進入insert模式；
添加環(huán)境變量挑胸；
編輯完成痒筒，點擊“esc鍵，退出insert模式”, 然后輸入“:wq!”,回車，保存成功簿透；
輸入“source ./.bash_profile”移袍，讓環(huán)境變量生效；
輸入”echo $PATH”,查看環(huán)境變量老充，發(fā)現(xiàn)添加成功葡盗；
重新打開終端，環(huán)境變量就會生效了啡浊。
輸入 flutter -h觅够；
輸入 flutter doctor；
[4] 在 Android Studio 安裝 Flutter 插件巷嚣，如下圖所示：
2019-5-30
[5] 創(chuàng)建你的第一個 Flutter Project喘先，開始你的 Flutter 之路。
2019-5-30
首次創(chuàng)建 Flutter Project 有點慢涂籽，請耐心等待??苹祟，創(chuàng)建好了之后可以直接 run 試試看。
2019-5-30
3. 實現(xiàn)第一個功能
3.1 需求
文字描述：
單詞列表评雌，用戶可以查看或者收藏單詞树枫，收藏的單詞在另外一個界面顯示。
具體展示：
2019-5-30
3.2 實現(xiàn)
[1] 在 pubspec.yaml 中添加單詞庫 english_words: ^3.1.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
english_words: ^3.1.0
[2] lib 文件夾下的 main.dart 文件中做如下修改：
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
theme: new ThemeData(
primaryColor: Colors.white,
),
home: new RandomWords(),
);
}
}
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _saved = new Set<WordPair>();
final _biggerFont = const TextStyle(fontSize: 18.0);
//此方法構建顯示建議單詞對的ListView
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// 對于每個建議的單詞對都會調用一次itemBuilder景东，然后將單詞對添加到ListTile行中
// 在偶數(shù)行砂轻，該函數(shù)會為單詞對添加一個ListTile row.
// 在奇數(shù)行，該函數(shù)會添加一個分割線widget斤吐，來分隔相鄰的詞對搔涝。
// 注意，在小屏幕上和措，分割線看起來可能比較吃力庄呈。
itemBuilder: (context, i) {
// 在每一列之前，添加一個1像素高的分隔線widget
if (i.isOdd) return new Divider();
// 語法 "i ~/ 2" 表示i除以2派阱，但返回值是整形（向下取整）诬留，比如i為：1, 2, 3, 4, 5
// 時，結果為0, 1, 1, 2, 2贫母， 這可以計算出ListView中減去分隔線后的實際單詞對數(shù)量
final index = i ~/ 2;
// 如果是建議列表中最后一個單詞對
if (index >= _suggestions.length) {
// ...接著再生成10個單詞對文兑，然后添加到建議列表
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
}
);
}
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
},
),
);
}
@override
Widget build(BuildContext context) {
//final wordPair = new WordPair.random();
// return new Text(wordPair.asPascalCase);
return new Scaffold (
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
}
4. 遇到的問題
[1] Mac 配置環(huán)境變量，打開終端腺劣，輸入 source ./.bash_profile
export PATH=/Users/用戶名/Documents/flutter/flutter/bin:$PATH
export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄绿贞，替換為你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
[2] flutter doctor 檢測結果有些是不成功的，出現(xiàn) 橘原！ 或者 ?? 籍铁，解決方案
/Users/sweetgirl/flutter/bin/flutter --no-color doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel beta, v1.5.4-hotfix.2, on Mac OS X 10.12 16A323, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices
? Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
? Verify that all connected devices have been paired with this computer in Xcode.
If all devices have been paired, libimobiledevice and ideviceinstaller may require updating.
To update with Brew, run:
brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
? ios-deploy not installed. To install:
brew install ios-deploy
? CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.dev/platform-plugins
To install:
brew install cocoapods
pod setup
[?] Android Studio (version 3.1)
[?] Connected device (1 available)
[3] 分享一個 Flutter UI 庫 -- Flutter Awesome
[4] 遇到一個問題涡上，嘗試過搜索引擎提供的方法都沒有解決。
flutter: Unable to load asset: assets/lake.jpg
最后的解決方法如下：
2019-5-30
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget titleSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text(
'牛油果肉丁意粉',
style: new TextStyle(
fontWeight: FontWeight.bold,
),
),
),
new Text(
'廣州, 廣東',
style: new TextStyle(
color: Colors.grey[500],
),
),
],
),
),
new Icon(
Icons.star,
color: Colors.red[500],
),
new Text('66'),
],
),
);
Column buildButtonColumn(IconData icon, String label) {
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Icon(icon, color: color),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
label,
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: color,
),
),
),
],
);
}
Widget buttonSection = new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
buildButtonColumn(Icons.call, 'CALL'),
buildButtonColumn(Icons.near_me, 'ROUTE'),
buildButtonColumn(Icons.share, 'SHARE'),
],
),
);
Widget textSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Text(
'''
抗氧抗衰老：牛油果含有豐富的甘油酸拒名、蛋白質及維他命吓懈，潤而不膩，是天然的抗氧衰老劑靡狞，不但能軟化和滋潤皮膚，還能收細毛孔隔嫡，皮膚表面可以形成乳狀隔離層甸怕，能夠有效抵御陽光照射，防止曬黑曬傷腮恩。果仁里提取的牛油果油營養(yǎng)豐富梢杭，含豐富的維生素E、鎂秸滴、亞油酸和必需脂肪酸武契，有助于強韌細胞膜，延緩表皮細胞衰老的速度荡含。 ''',
softWrap: true,
),
);
return new MaterialApp(
title: 'Flutter Demo',
home: new Scaffold(
body: new ListView(
children: [
new Image.asset(
'images/lake.jpg',
width: 600.0,
height: 240.0,
fit: BoxFit.fitWidth,
),
titleSection,
buttonSection,
textSection,
],
),
),
theme: new ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
熱加載后效果如下：
2019-5-30
5. 總結
對于新事物的出現(xiàn)咒唆，有人是抵觸，有人是接受释液，有人是歡喜全释，有人是嗤之以鼻，無論別人如何误债，做好自己浸船，多學一點不吃虧。換言之寝蹈，用馬原的話來說李命，一切事物都是發(fā)展的，都處在新事物的產生和舊事物的滅亡中箫老。最近喜歡看哲學類的書籍了～
文章是 Android 面向需求開發(fā)系列中的一文封字，更多相關文章請關注。如若有什么問題槽惫，也可以通過掃描二維碼發(fā)消息給我周叮。轉載請注明出處，謝謝界斜！
二維碼
作者：Emily CH
2019年5月7日
