How can I display items in the list based on the category?

Question

I am trying to display the items in my list based on the categories that I have. I am fetching them from the Cloud Firestore and divid them based on categories, but I do not know how to display the items on the screen based on the categories that I am selecting. So, I was wondering if someone can help.

Please find my code below:

import 'package:flutter/material.dart';
import 'package:uploadvideo/addNewVideo.dart';
import 'package:uploadvideo/info.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key key,
    this.title,
  }) : super(key: key);

  final String title;
  List<String> items = [
    "All",
    "Research",
    "Technology",
    "Math and Science",
    "Design"
  ];

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String category = "";
  String selectedValue = "All";
  List list = [];
  final firestoreInstance = FirebaseFirestore.instance;

  void _onPressed() {
    setState(
      () {
        FirebaseFirestore.instance.collection('Record').get().then(
          (QuerySnapshot querySnapshot) {
            querySnapshot.docs.forEach(
              (doc) {
                if (selectedValue == "All") {
                  list.add(doc["category"]);
                  print(list);
                } else if (selectedValue == "Research") {
                  if (doc["category"] == "Research") {
                    list.add(doc["category"]);
                    print(list);
                  }
                } else if (selectedValue == "Technology") {
                  if (doc["category"] == "Technology") {
                    list.add(doc["category"]);
                    print(list);
                  }
                } else if (selectedValue == "Math and Science") {
                  if (doc["category"] == "Math and Science") {
                    list.add(doc["category"]);
                    print(list);
                  }
                } else if (selectedValue == "Design") {
                  if (doc["category"] == "Design") {
                    list.add(doc["category"]);
                    print(list);
                  }
                }
              },
            );
          },
        );
      },
    );
  }

  _downloadImage(context) {
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('Record').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return LinearProgressIndicator();

        return snapshot.data.docs.isEmpty == false
            ? _buildList(context, snapshot.data.docs)
            : Center(
                child: Text(
                  "No tutorials record",
                  style: TextStyle(
                    fontSize: 30,
                    color: Color(0xFF002545),
                  ),
                ),
              );
      },
    );
  }

  Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return ListView(
        padding: const EdgeInsets.only(top: 15.0),
        children:
            snapshot.map((data) => _buildListItem(context, data)).toList());
  }

  Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
    final record = Record.fromSnapshot(data);

    return Padding(
      key: ValueKey(record.category),
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Card(
        child: Column(
          children: [
            // Image.network(record.url),
            Padding(
              padding:
                  const EdgeInsets.only(left: 8.0, right: 8, top: 8, bottom: 3),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  record.title,
                  style: TextStyle(
                      color: Colors.orange,
                      fontSize: 14,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8.0, right: 8, bottom: 8),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  record.category,
                  style: TextStyle(
                      color: Color(0xFF002545),
                      fontWeight: FontWeight.bold,
                      fontSize: 18),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFF1A5993),
        title: Text(widget.title),
        actions: [
          DropdownButton(
            value: selectedValue,
            items: widget.items.map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(
                  value,
                  style: TextStyle(color: Colors.black),
                ),
              );
            }).toList(),
            icon: Icon(
              Icons.arrow_downward,
              color: Colors.white,
            ),
            elevation: 16,
            style: TextStyle(color: Colors.white),
            underline: Container(
              height: 2,
              color: Colors.white,
            ),
            onChanged: (String value) {
              setState(
                () {
                  selectedValue = value;
                  _onPressed();
                },
              );
            },
          )
        ],
      ),
      body: Container(
        width: size.width,
        height: size.height,
        child: _downloadImage(context),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.amber,
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => AddNewVideo(),
            ),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 1

You can add a flag on your list items saying if item is or not a category, then with a ListView.builder you can return different widgets for each kind of item:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    var item = items[index];
    
    if(item.isCat){
      return CatWidget();
    }else{
      return ItemWidget();
    }
  },
);