Flutterでデータを読み込むまで画像やテキストを灰色にしたい

Question

FlutterでDBからデータを取得して表示する場合、データが表示されるまでその箇所をグレーアウトしておくにはどのように実現するのでしょうか？

現在スタッフ一覧を表示するコードを書いていて(DBは仮で存在するていで書いています)、今回は実験的に、「スタッフ写真」の箇所だけ実現してみたいと考えています。

?と：の分岐を使って、グレーアウト用と写真用のエリアは用意できました。ここからDB取得後、setStateで写真をセットするイメージで考えているのですが、上手く書き方を想像できなくて、、

ちなみに以下のコードは、既にDBから情報が配列に入っている前提で書いています。(DB取得の経験がないため、取得するためのコードの書き方も、文献を参考にしてもピンとこなくて...)

class ListViewHorizonCast extends StatelessWidget {
  //データ(仮)
  final List<Map<String, dynamic>> listItems = [
    {
      'name': '山本太郎',
      'img': '../assets/images/sample.jpg',
      'comment': 'ここに一言入ります',
      'age': '22' + '歳',
    },
    {
      'name': '山本花子',
      'img': '../assets/images/sample.jpg',
      'comment': 'ここに一言入ります',
      'age': '22' + '歳',
    },
    {
      'name': '田中花子',
      'img': '../assets/images/sample.jpg',
      'comment': 'ここに一言入ります',
      'age': '22' + '歳',
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(top: 10.0),
      padding: EdgeInsets.symmetric(
        horizontal: Settings().sidePadding(),
        vertical: 20,
      ),
      child: Column(
        children: <Widget>[
          //タイトル
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(top: 0.0, bottom: 0.0),
            height: 30,
            child: Text(
              'スタッフ一覧',
              style: Settings.fontTitleStyle,
              textAlign: TextAlign.left,
            ),
          ),
          //カードリスト
          Container(
            height: 200,
            padding: EdgeInsets.only(bottom: 15.0),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: listItems.length,
              itemBuilder: (context, index) {
                //カード
                return FlatButton(
                  child: SizedBox(
                    width: 150,
                    child: Card(
                        child: Stack(
                      fit: StackFit.expand,
                      children: <Widget>[
                        //スタッフの写真
                        Container(
                          child: listItems == true
                              //グレーアウト
                              ? Container()
                              //データ取得後の写真表示
                              : Container(
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                      image: AssetImage(
                                          '../assets/images/sample.jpg'),
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  child: Container(
                                    decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        begin: Alignment.topCenter,
                                        end: Alignment.bottomCenter,
                                        stops: [0.5, 0.75, 0.95],
                                        colors: [
                                          Colors.black12,
                                          Colors.black54,
                                          Colors.black87,
                                        ],
                                      ),
                                    ),
                                  )),
                        ),
                        
                        //スタッフの名前
                        Positioned(
                          bottom: 25.0,
                          left: 5.0,
                          child: Text(
                            listItems[index]['name'],
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                        //スタッフの一言
                        Positioned(
                          bottom: 8.0,
                          left: 5.0,
                          child: Text(
                            listItems[index]['comment'],
                            style:
                                TextStyle(color: Colors.white70, fontSize: 11),
                          ),
                        ),
                      ],
                    )),
                  ),
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => CastProfileDetail(),
                        ));
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

以上になります。
このコード内の変数「listItems」を操作して、DB取得後、setStateで切り替えるイメージではいるのですが、どのようにするのでしょうか？
ご教授のほど、よろしくお願いいたします。

Answer 1

DB取得後、setStateで切り替えるイメージではいるのですが、どのようにするのでしょうか？

FutureBuilderを使って、データ取得前と取得後でウィジェットを出し分けるというのはどうでしょうか?

少し抽象的なコードですが、大体こんな感じの雰囲気になるかと思います。

const sampleData = [
  {
    'name': '山本太郎',
    'img': '../assets/images/sample.jpg',
    'comment': 'ここに一言入ります',
    'age': '22' + '歳',
  },
  {
    'name': '山本花子',
    'img': '../assets/images/sample.jpg',
    'comment': 'ここに一言入ります',
    'age': '22' + '歳',
  },
  {
    'name': '田中花子',
    'img': '../assets/images/sample.jpg',
    'comment': 'ここに一言入ります',
    'age': '22' + '歳',
  },
];

class StuffListSection extends StatefulWidget {
  @override
  _StuffListSectionState createState() => _StuffListSectionState();
}

class _StuffListSectionState extends State<StuffListSection> {
  
  Future<List<Map<String, dynamic>>> staffs; // 取得したデータを保持するための変数

  @override
  void initState() {
    super.initState();
    stuffs = _loadStaffData(); // データ取得開始
  }

  Future<List<Map<String, dynamic>>> _loadStaffData() async {
    return sampleData; // 実際はDBからデータを取得して返す
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('スタッフ一覧'),
        Container(
          height: 200,
          // FutureBuilderを使って、データ取得前と取得後でウィジェットを出し分ける。
          child: FutureBuilder<List<Map<String, dynamic>>>(
            future: staffs,
            builder: (context, snapshot) {
              // データが取得できるまではプレースホルダーを表示
              if (!snapshot.hasData) {
                return StaffListPlaceHolder();
              }
              // データ取得後に表示したいもの (取得したデータは`snapshot.data`に入る)
              return ...
            },
          ),
        ),
      ],
    );
  }
}

// データが取得できるまでのプレースホルダー。
class StaffListPlaceHolder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: List.generate(10, (_) {
        return Card(
          color: Colors.grey[300],
          child: const SizedBox(width: 150),
        );
      }),
    );
  }
}

※ 表示するスタッフの数はデータが取得できるまで分からないと考えて、ListView全体をプレースホルダー化してます。

---

あとはこの辺のパッケージを使うと見た目も良い感じになるかもしれません。

• https://pub.dev/packages/shimmer

---

追記

上記の回答は手元で考えてみたのをそのまま貼ったので、元のコードから離れすぎてて、あまり参考にならないかもしれません。
なるべく最小限の修正 + setStateだけで、それっぽいコード書いたので、こっち参考にしてください。

class ListViewHorizonCast extends StatefulWidget {
  @override
  _ListViewHorizonCastState createState() => _ListViewHorizonCastState();
}

class _ListViewHorizonCastState extends State<ListViewHorizonCast> {
  List<Map<String, dynamic>> listItems;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (listItems == null) {
      _loadData();
    }
  }

  Future<void> _loadData() async {
    // データ取得に1秒かかった想定
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      listItems = [
        {
          'name': '山本太郎',
          'img': '../assets/images/sample.jpg',
          'comment': 'ここに一言入ります',
          'age': '22' + '歳',
        },
        {
          'name': '山本花子',
          'img': '../assets/images/sample.jpg',
          'comment': 'ここに一言入ります',
          'age': '22' + '歳',
        },
        {
          'name': '田中花子',
          'img': '../assets/images/sample.jpg',
          'comment': 'ここに一言入ります',
          'age': '22' + '歳',
        },
      ];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(top: 10.0),
      padding: EdgeInsets.symmetric(
        horizontal: Settings().sidePadding(),
        vertical: 20,
      ),
      child: Column(
        children: <Widget>[
          //タイトル
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(top: 0.0, bottom: 0.0),
            height: 30,
            child: Text(
              'スタッフ一覧',
              style: Settings.fontTitleStyle,
              textAlign: TextAlign.left,
            ),
          ),
          //カードリスト
          Container(
            height: 200,
            padding: EdgeInsets.only(bottom: 15.0),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: listItems?.length ?? 3,
              itemBuilder: (context, index) {
                //カード
                return FlatButton(
                  child: SizedBox(
                    width: 150,
                    child: Card(
                      child: Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          listItems == null
                              //グレーアウト
                              ? Container(color: Colors.grey[200])
                              //スタッフの写真
                              : Container(
                                  child: Container(
                                    decoration: BoxDecoration(
                                      image: DecorationImage(
                                        image: AssetImage(
                                          '../assets/images/sample.jpg',
                                        ),
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                    child: Container(
                                      decoration: BoxDecoration(
                                        gradient: LinearGradient(
                                          begin: Alignment.topCenter,
                                          end: Alignment.bottomCenter,
                                          stops: [0.5, 0.75, 0.95],
                                          colors: [
                                            Colors.black12,
                                            Colors.black54,
                                            Colors.black87,
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                          //スタッフの名前
                          Positioned(
                            bottom: 25.0,
                            left: 5.0,
                            child: Text(
                              listItems != null ? listItems[index]['name'] : '',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                          //スタッフの一言
                          Positioned(
                            bottom: 8.0,
                            left: 5.0,
                            child: Text(
                              listItems != null
                                  ? listItems[index]['comment']
                                  : '',
                              style: TextStyle(
                                color: Colors.white70,
                                fontSize: 11,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  onPressed: () {
                    if (listItems != null) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => CastProfileDetail(),
                        ),
                      );
                    }
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Comments

[Yariii]

お返事が遅くなりました。
具体的なコードまで書いてくださり、大変ありがとうございます。

上記コードを参考に組み直したところ、とても満足のいく結果となりました。感激です。。。