大家好今天要用到StreamBuilder、FadeInImage.memoryNetwork

大部分的時候我們可能會用到一些網路上的圖片，之前我們使用的都是從asset來讀取圖片，今天我們來用網路圖片，載入網路圖片，可以使用Image.network()

Image.asset()
Image.network()

今天不僅要用到網路圖片，而且還需要在載入圖片的時候希望有Loading的感覺，
這件事跟placeholder有關係，FLutter也提供了FadeInImage讓我們方便地使用

Series是我自己建的一個model，方便我取用資料

class Series{
  Series(this.episodes,{this.title, this.description, this.imageURL, this.imageAssetsName,this.duration});

  String title;
  String description;
  String duration;
  String imageURL;
  String imageAssetsName;

  List<Episode> episodes;

}

FadeInImage

到pubspec.yaml裡面新增

  transparent_image: ^1.0.0

使用FadeInImage.memoryNetwork

  _buildNetworkImage(Series series) {
    return FadeInImage.memoryNetwork(
      placeholder: kTransparentImage, // placeholder可以是一個asset內的載入gif，或其他東西
      image: series.imageURL,//圖片的url
      fit: BoxFit.cover,
      imageErrorBuilder: (context, error, s) {
        print('something: $error}');
        return Text('error $s');
      },
      fadeInDuration: Duration(milliseconds: 300),
    );
  }

跟原本放圖片的位置放一樣的地方

 ClipRRect(
        borderRadius: BorderRadius.circular(4.0),
       child: Container(
             color: Colors.white.withOpacity(0.3),//背景是Container的顏色
             width: 160,
             height: 80,
             child: _buildNetworkImage(
                snapshot.data[index])),
 ),

StreamBuilder

StreamBuilder可以監聽數據流來更新UI
它需要帶一個stream，這邊先定義一個測試的Stream

  Stream<List<Series>> _getSeries() {
  print('_getSeries');
  return Stream.fromFuture(Future.delayed(Duration(seconds: 3), () {
    return _listSeries;
  }));
}

  snapshot.data即為傳進來的資料， 型別是StreamBuilder<List<Series>>中的List<Series>

一樣也有ConnectionState可以判斷狀態，可以根據不同狀態return不同Widget
如果有數據進來的時候建立ListView.builder顯示資料，否則顯示CircularProgressIndicator

 StreamBuilder<List<Series>>(
              stream: _getSeries(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        return Row(
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(4.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(4.0),
                                child: Container(
                                    color: Colors.white.withOpacity(0.3),
                                    width: 160,
                                    height: 80,
                                    child: _buildNetworkImage(
                                        snapshot.data[index])),
                              ),
                            ),
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.only(left: 8.0),
                                child: Text(
                                  "${snapshot.data[index].title}",
                                  style: TextStyle(
                                      fontSize: 16.0,
                                      color: Colors.white.withOpacity(0.8)),
                                ),
                              ),
                            ),
                            Icon(
                              Icons.play_arrow,
                              size: 32,
                            )
                          ],
                        );
                      });
                }
                return Center(
                  child: SizedBox(
                    width: 50.0,
                    height: 50.0,
                    child: CircularProgressIndicator(
                      valueColor: AlwaysStoppedAnimation(Colors.red),
                    ),
                  ),
                );
              }),

今天的效果圖，可以看到它如果傳進資料就會渲染這些list，並且圖片出現是漸進的。

GitHub連結： flutter-netflix-clone