Zenn
🔨

【Flutter & FireStore】Modelを作成して、データの一覧を取得・表示する　その２

2021/08/16に公開
Flutter
tech

この記事では、Modelを作成して、Firebaseからデータを取得してそれを表示させるまでを解説しています。その１で、データの取得までは完了したので、今回は、取得したデータの表示を解説します。
今回は使えるようになることが目的なので、詳細な説明は省きますのでご了承ください。
▼その１はこちら
https://zenn.dev/ryo_t/articles/5dd6970f2e3f06

ChangeNotifierProviderでWigetを返す

まず、前回取得したModelデータをWigetに認識させるために、ChangeNotifierProviderというものを使います。
コードは以下のような感じになります。

ChangeNotifierProvider(
      create: (_) => ProductListModel()..getProducts(),
      child: Consumer<ProductListModel>(builder: (context, model, child) {
        final products = model.products;
	return // 表示したいWidget

解説

ChangeNotifierProviderは、前回、ProductListModelで設定したFirebaseからデータを取得するためのメソッドからデータをもらって、表示するために使用します。

class ProductListModel extends ChangeNotifier {
  List<ProductModel> products = [];

  Future getProducts() async {
    collection =
        await FirebaseFirestore.instance.collection('products').get();
    products = collection.docs
        .map((doc) => ProductModel(
           　doc['name'],doc['price']))
        .toList();
    this.products = products;
    notifyListeners();
  }
}

create の部分でModelを指定すると同時に、Model内に作成した、getProduct()を実行する。

      create: (_) => ProductListModel()..getProducts(),

この部分で、Model内に作成した、Firebaseへの接続が行われ、データが取得されます。

childにConsumerを指定し、データを使える形にする

      child: Consumer<ProductListModel>(builder: (context, model, child) {

簡潔に説明すると、ProductListModelをmodelという変数（みたいなもの）に入れて使います。という宣言になります。

model変数に入っているProductListModelを利用する

        final products = model.products;

この部分は、ここまでの手順で取得したデータをproductsという変数に格納しています。
ProductListModelで作成したproductsという配列の変数が、Consumerによって、"model"に格納されているので、model.productsと指定することで取得することができます。

※この部分は別に必須ではないのですが、データを使うたびに、model.productsと書くのが面倒だし、コードが長くなるので、別の変数に再度入れ直しておくことをお勧めします。

データを表示する

ここまでで、Firebaseからデータを取得して使える形にする作業は完了したのでいよいよ表示させていきたいと思います。

        final products = model.products;

まず、この部分で定義した配列のproductsには、ProductModelというかたまりが、複数配列で格納されています。

▼ProductModel

class ProductModel {
  String productName, productPrice;
  ProductModel(
    this.productName,
    this.productPrice,
  );
}

したがって、productsから実際の値を取得するためには、以下のように指定する必要があります。

model.products[i].productName
// iは配列のインデックス。（model（ProductListModel）の中のproductsという変数のi番目に入っているProductModelのproductNameを取得する）

実際のコード

では最後に、実際に表示するためのコードを書いていきます。

ChangeNotifierProvider(
      create: (_) => ProductListModel()..getProducts(),
      child: Consumer<ProductListModel>(builder: (context, model, child) {
        final products = model.products;
	return Column(
	  children: <Widget>[
	    Text(products[0].productName),
	    Text(products[0].productPrice),
	    Text(products[1].productName),
	    Text(products[1].productPrice),
	  ]
	)

まとめ

今回は、Modelを作成して、firebaseからデータの一覧を取得・表示する方法について解説しました。

結構手順が多いですが、『Modelを作成して、データを格納してから使用する』という手順は、どのようなプログラムを組むときにも必要になる書き方なので、これを機に実践していただければと思います。

Discussion