title: Flutter: 完成一個圖片APP
自從 Flutter 推出之後, 一直是備受關注, 有看好的也有不看好的, 作為移動開發人員自然是要嘗試一下的(但是它的巢狀寫法真的難受), 本著學一個東西, 就一定要動手的態度, 平時又喜歡看一些貓狗的圖片, 就想著做一個載入貓狗圖片你的 APP, 介面圖如下(介面不是很好看).
主要模組
NetWork
api.dart檔案中, 分別定義了DogApi, CatApi兩個類, 一個用於處理獲取貓的圖片的類, 一個用於處理狗的圖片的類.
http_request.dart檔案封裝了Http請求, 用於傳送和接收資料.
url.dart檔案封裝了需要用到的Api介面, 主要是為了方便和統一管理而編寫.
Models資料夾下分別定義不同API介面返回資料的模型.
圖片頁
瀑布流使用的flutter_staggered_grid_view庫, 作者自定義了Delegate計算佈局, 使用起來非常簡單.
Widget scene = new StaggeredGridView.countBuilder(
physics: BouncingScrollPhysics(),
itemCount: this.breedImgs != null ? this.breedImgs.urls.length : 0,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
crossAxisCount: 3,
itemBuilder: (context, index) {
return new GestureDetector(
onTapUp: (TapUpDetails detail) {
// 展示該品種的相關資訊
dynamic breed = this.breeds[this.selectedIdx].description;
// TODO: 取出當前點選的然後所有往後的
List<String> unreadImgs = new List<String>();
for (int i = index; i < this.breedImgs.urls.length; i++) {
unreadImgs.add(this.breedImgs.urls[i]);
}
AnimalImagesPage photoPage = new AnimalImagesPage(
listImages: unreadImgs,
breed: this.breeds[this.selectedIdx].name,
imgType: "Cat",
petInfo: this.breeds[this.selectedIdx],
);
Navigator.of(context)
.push(new MaterialPageRoute(builder: (context) {
return photoPage;
}));
},
child: new Container(
width: 100,
height: 100,
color: Color(0xFF2FC77D), //Colors.blueAccent,
child: new CachedNetworkImage(
imageUrl: this.breedImgs.urls[index],
fit: BoxFit.fill,
placeholder: (context, index) {
return new Center(child: new CupertinoActivityIndicator());
},
),
),
);
},
// 該屬性可以控制當前 Cell 佔用的空間大小, 用來實現瀑布的感覺
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(1, index.isEven ? 1.5 : 1),
);
複製程式碼- 組裝
PickerView
系統預設的 PickerView 在每一次切換都會回撥, 而且沒有確定和取消事件,
如果直接使用會造成頻繁的網路請求, 記憶體消耗也太快, 所以組裝了一下, 增加確定和取消才去執行網路請求, 這樣就解決了這個問題.
Widget column = Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
width: MediaQuery.of(context).size.width,
height: 40,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Padding(
padding: EdgeInsets.only(left: 10.0),
child: new GestureDetector(
onTapUp: (detail) {
// 點選了確定按鈕, 退出當前頁面
Navigator.of(context).pop();
// 回撥操作
this.submit(this.selectedIndex);
},
child: new Text(
"確定",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontSize: 18),
),
),
),
new Padding(
padding: EdgeInsets.only(right: 10.0),
child: new GestureDetector(
onTapUp: (detail) {
// 點選了確定按鈕, 退出當前頁面
Navigator.of(context).pop();
},
child: new Text(
"取消",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontSize: 18),
),
),
)
],
),
),
],
),
new Container(
height: 1,
color: Colors.white,
),
// Picker
new Expanded(
child: new CupertinoPicker.builder(
backgroundColor: Colors.transparent,
itemExtent: 44,
childCount: this.names.length,
onSelectedItemChanged: (int selected) {
this.selectedIndex = selected;
this.onSelected(selected);
},
itemBuilder: (context, index) {
return new Container(
width: 160,
height: 44,
alignment: Alignment.center,
child: new Text(
this.names[index],
textAlign: TextAlign.right,
style: new TextStyle(
color: Colors.white,
fontSize: 16,
decoration: TextDecoration.none),
),
);
}),
)
],
);
複製程式碼詳情頁
Column包含ListView
詳情頁中, 上方是一個圖片, 下方是關於品種的相關資訊, 貓下方是通過 API獲取到的屬性進行一個展示, 需要注意一點是, 如果Column封裝了MainAxis相同方向的滾動控制元件, 必須設定Width/Height, 同理, Row也是需要注意這一點的.
我在這裡的做法是通過一個Container包裹 ListView.
new Container(
margin: EdgeInsets.only(bottom: 10, top: 10),
height: MediaQuery.of(context).size.height - MediaQuery.of(context).size.width / 1.2 - 80,
width: MediaQuery.of(context).size.width,
child: listView,
),
複製程式碼- 圖片動畫
這一部分稍微複雜一些, 首先需要監聽滑動的距離, 來對圖片進行變換, 最後根據是否達到閾值來進行切換動畫, 這裡我沒有實現在最後一張和第一張圖片進行切換以至於可以無限迴圈滾動, 我在邊界閾值上只是阻止了下一步動畫.
動畫我都是通過Matrix4來設定不同位置的屬性, 它也能模擬出 3D 效果,
動畫的變換都是Tween來管理.
void _initAnimation() {
// 透明度動畫
this.opacityAnimation = new Tween(begin: 1.0, end: 0.0).animate(
new CurvedAnimation(
parent: this._nextAnimationController, curve: Curves.decelerate))
..addListener(() {
this.setState(() {
// 通知 Fluter Engine 重繪
});
});
// 翻轉動畫
// 第三個值是角度
var startTrans = Matrix4.identity()..setEntry(3, 2, 0.006);
var endTrans = Matrix4.identity()
..setEntry(3, 2, 0.006)
..rotateX(3.1415927);
this.transformAnimation = new Tween(begin: startTrans, end: endTrans)
.animate(new CurvedAnimation(
parent: this._nextAnimationController, curve: Curves.easeIn))
..addListener(() {
this.setState(() {});
});
// 縮放
var saveStartTrans = Matrix4.identity()..setEntry(3, 2, 0.006);
// 平移且縮放
var saveEndTrans = Matrix4.identity()
..setEntry(3, 2, 0.006)
..scale(0.1, 0.1)
..translate(-20.0, 20.0); // MediaQuery.of(context).size.height
this.saveToPhotos = new Tween(begin: saveStartTrans, end: saveEndTrans)
.animate(new CurvedAnimation(
parent: this._saveAnimationController, curve: Curves.easeIn))
..addListener(() {
this.setState(() {});
});
}
複製程式碼Widget引用這個屬性來執行動畫.
Widget pet = new GestureDetector(
onVerticalDragUpdate: nextUpdate,
onVerticalDragStart: nextStart,
onVerticalDragEnd: next,
child: new Transform(
transform: this.dragUpdateTransform,
child: Container(
child: new Transform(
alignment: Alignment.bottomLeft,
transform: transform,
child: new Opacity(
opacity: opacity,
child: Container(
width: MediaQuery.of(context).size.width / 1.2,
height: MediaQuery.of(context).size.width / 1.5 - 30,
child: new Padding(
padding: EdgeInsets.all(0),
child: new CachedNetworkImage(
imageUrl: this.widget.listImages[item],
fit: BoxFit.fill,
placeholder: (context, content) {
return new Container(
width: MediaQuery.of(context).size.width / 2.0 - 40,
height: MediaQuery.of(context).size.width / 2.0 - 60,
color: Color(0xFF2FC77D),
child: new Center(
child: new CupertinoActivityIndicator(),
),
);
},
),
),
),
),
),
),
),
);
複製程式碼Firebase_admob
注意: 這裡需要去 firebase 官網註冊 APP, 然後分別下載 iOS, Android 的配置檔案放到指定的位置, 否則程式啟動的時候會閃退.
iOS info.plist: GADApplicationIdentifier也需要配置, 雖然在 Dart 中會啟動的時候就註冊ID, 但是這裡也別忘了配置.
Android Manifst.xml 也需要配置
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value=""/>
複製程式碼這裡說一下我因為個人編碼導致的問題, 我嘗試自己來控制廣告展示, 加了一個讀秒跳過按鈕(想強制觀看一段時間), 點選跳過設定setState, 但是在 build 方法中又請求了廣告, 導致了一個死迴圈, 最後由於請求次數過多還沒有設定自己的裝置為測試裝置也不是使用的測試ID, 賬號被暫停了, 所以大家使用的時候要避免這個問題, 儘量還是將自己的裝置新增到測試裝置中.
使用的話比較簡單(官方的演示程式碼直接複製也可以用).
class AdPage {
MobileAdTargetingInfo targetingInfo;
InterstitialAd interstitial;
BannerAd banner;
void initAttributes() {
if (this.targetingInfo == null) {
this.targetingInfo = MobileAdTargetingInfo(
keywords: ["some keyword for your app"],
// 防止被Google 認為是無效點選和展示.
testDevices: ["Your Phone", "Simulator"]);
bool android = Platform.isAndroid;
this.interstitial = InterstitialAd(
adUnitId: InterstitialAd.testAdUnitId,
targetingInfo: this.targetingInfo,
listener: (MobileAdEvent event) {
if (event == MobileAdEvent.closed) {
// 點選關閉
print("InterstitialAd Closed");
this.interstitial.dispose();
this.interstitial = null;
} else if (event == MobileAdEvent.clicked) {
// 關閉
print("InterstitialAd Clicked");
this.interstitial.dispose();
this.interstitial = null;
} else if (event == MobileAdEvent.loaded) {
// 載入
print("InterstitialAd Loaded");
}
print("InterstitialAd event is $event");
},
);
// this.banner = BannerAd(
// targetingInfo: this.targetingInfo,
// size: AdSize.smartBanner,
// listener: (MobileAdEvent event) {
// if (event == MobileAdEvent.closed) {
// // 點選關閉
// print("InterstitialAd Closed");
// this.interstitial.dispose();
// this.interstitial = null;
// } else if (event == MobileAdEvent.clicked) {
// // 關閉
// print("InterstitialAd Clicked");
// this.interstitial.dispose();
// this.interstitial = null;
// } else if (event == MobileAdEvent.loaded) {
// // 載入
// print("InterstitialAd Loaded");
// }
// print("InterstitialAd event is $event");
// });
}
}
@override
void show() {
// 初始化資料
this.initAttributes();
// 然後控制跳轉
if (this.interstitial != null) {
this.interstitial.load();
this.interstitial.show(
anchorType: AnchorType.bottom,
anchorOffset: 0.0,
);
}
}
}
複製程式碼專案比較簡單, 但是編寫的過程中也遇到了許多問題, 慢慢解決的過程也學到了挺多.