如何在 Flutter 中使用 Firebase firestore 中的数据填充我的 ExpansionTile 小部件

Question

I'm trying to do the design shown in the picture Link below. I am getting the data (transportation, plastics) from my Firestore Database and I am able to know which one is in progress or not started yet. But I do not know where to start when doing the ExpansionTiles picture

So far, this is the code that I Currently have. Can anyone please give me some guidance how to start doing this? Sorry I'm a beginner and this may seem a very easy question but I am confused.

 import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class ChallengeScreen extends StatefulWidget {
  const ChallengeScreen({Key? key}) : super(key: key);

  @override
  // ignore: no_logic_in_create_state
  _ChallengeScreenState createState() => _ChallengeScreenState();
}

class _ChallengeScreenState extends State<ChallengeScreen> {
  @override
  void initState() {
    super.initState();
    WidgetsFlutterBinding.ensureInitialized();
  }

  final Query _collectionRef = FirebaseFirestore.instance.collection('modules');

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        const ExpansionTile(
          title: Text('In Progress'),
          children: <Widget>[
            ListTile(title: Text('This is tile number 1')),
          ],
        ),
        const ExpansionTile(
          title: Text('Discover New'),
          children: <Widget>[
            ListTile(title: Text('This is tile number 2')),
          ],
        ),
        const ExpansionTile(
          title: Text('Completed'),
          children: <Widget>[
            ListTile(title: Text('This is tile number 3')),
          ],
        ),
      ],
    );
  }
}

Answer 1

There is my suggestion:

• 1st, replace your Column by ListView so in case there's overflow it'll avoid error (or wrap Column with SingleChildScrollView )
• 2nd, if the ExpansionTile children's value will change (because you'll have to await data from Firebase) then remove the const
• 3rd, here is my code suggestion for your ExpansionTile s (I didn't test it though):

ExpansionTile(
  title: Text('In Progress'),
  children: [
    // I'll name the data from firestore "datas"
    datas == null
      ? SizedBox.shrink()
      : Container(
          width: MediaQuery.of(context).size.width, 
          height: /* set custom height here */
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (ctx, index) { 
              SizedBox(
                width: /* set custom value */,
                height: /* set custom value */,
                child: Column(children: [
                  Text(/* set value */ ), 
                  Container(
                    width: /* set custom value */,
                    height: /* set custom value */,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(/* set value */),
                        fit: BoxFit.cover
                      ),
                    ),
                  ),
                ]),
              ), 
            }
          ) 
        ),
  ],
)