FlutterでStreamBuilder、FutureBuilder、ListView.builder、ListTileの3段論法みたいなやつの書き方
・ListView.builderでListTileを量産、itemCountにアイテムの個数、itemBuilderにListTileを指定
・FutureBuilderでListView.builderを監視、futureが変化した際にbuilder以下が発動
・StreamBuilderでFutureBuilderを監視、streamが変化した際にbuilder以下が発動
この3段論法みたいなのを自力でカッコよく書けるようになりたい
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('users').snapshots(),
builder: (context, snapshot) {
return FutureBuilder<>(
future: FirebaseFirestore.instance.collection('messages').snapshot(),
builder: (context, snapshot){
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index){
return ListTile(
leading: Icon(Icons.home)
title: Text(snapshot.data![index].title),
trailing: Icon(Icons.settings)
onTap: () {
// Do something
},
)
}
)
}
)
}
)
公式ドキュメント:
https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
https://api.flutter.dev/flutter/widgets/ListView-class.html
https://api.flutter.dev/flutter/material/ListTile-class.html
参考:
https://bukiyo-papa.com/streambuilder
https://zenn.dev/sqer/articles/db20a4d735fb7e5928ba
https://ryamamoto.netlify.app/2020/01/16/future-future-stream