Flutter Body with ListView not scrolling

Question

New Flutter Developer --> I have looked at numerous asks regarding scrolling and it looks challenging based on implementation. Trying to come up with standard approach and cannot get it to scroll.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:shmc_memberapp/models/data/get_chapters.dart';

class SampleChapter extends StatefulWidget {
  const SampleChapter({super.key});

  @override
  State<SampleChapter> createState() => _SampleChapterState();
}

class _SampleChapterState extends State<SampleChapter> {
  //Do I need this was Auth and User in Example
  //final chaptersRef = FirebaseFirestore.instance.collection('shmc_chapters');

  List<String> chapterDocIDs = [];

  //Method to get chapter Doc IDs
  //Apply Sorting if needed
  Future getChapterDocIDs() async {
    //getting all IDs in Chapter Collection
    await FirebaseFirestore.instance
        .collection('shmc_chapters')
        .orderBy('orderID', descending: false)
        .get()
        .then(
          (chapterSnapshot) => chapterSnapshot.docs.forEach((chapterDoc) {
            print(chapterDoc.reference);
            //Collect ALL Chapter Doc IDs into our List Collection
            chapterDocIDs.add(chapterDoc.reference.id);
          }),
        );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("SHMC Chapters"),
          backgroundColor: const Color.fromARGB(255, 43, 55, 138),
          foregroundColor: Colors.white),
      //drawer: const NavigationDrawer(),
      body: Center(
        child: FutureBuilder(
          future: getChapterDocIDs(),
          builder: (context, chapterSnapshot) {
            return ListView.builder(
              itemCount: chapterDocIDs.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(4.0),
                    child: ListTile(
                    title: GetChapterData(
                      documentID: chapterDocIDs[index]),
                      tileColor: Colors.white,
                      onTap: () {},
                        //trailing: const Icon(Icons.edit),
                    ),
                  );
                }
              );
            },
          ),
        ),
    );
  }
}

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

class GetChapterData extends StatelessWidget {
  //const GetChapterData({super.key});

  //Got List of Chapter Doc IDs - get Data
  final String documentID;

  const GetChapterData({super.key, required this.documentID});

  @override
  Widget build(BuildContext context) {
    //Get Collection of Chapters
    CollectionReference chapters =
        FirebaseFirestore.instance.collection('shmc_chapters');

    return FutureBuilder<DocumentSnapshot>(
      future: chapters.doc(documentID).get(),
      builder: ((context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          Map<String, dynamic> data =
              snapshot.data!.data() as Map<String, dynamic>;
          return Text('${data['chapterName']} - ${data['chapterCity']}, ${data['chapterState']}');
        }
        return const Text('Loading...');
      }),
    );
  }
}

What am I missing?

I have tried: physics: NeverScrollableScrollPhysics(), and shrinkWrap: true, - but cannot figure this out. Expect the scrolling to happen as the list continues to grow.

Answer 1

To make a listView scrollable.You simply wrap your return function in Scrallable widget like SingleChildScrollView() instead of Center Widget

import 'package:flutter/material.dart';

// ... your data fetching function
Future<List<YourData>> fetchData() async {
  // ... fetch data asynchronously
}

class YourWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: FutureBuilder<List<YourData>>(
        future: fetchData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              shrinkWrap: true,
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index].title), // Use your data here
                  // ... other list item content
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}