Flutter: 完成一個圖片APP

---

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,
          );
    }
  }
}
複製代碼

項目比較簡單, 可是編寫的過程當中也遇到了許多問題, 慢慢解決的過程也學到了挺多.

一些資源

Public APIs

代碼地址