Flutter adding column scroll at fullscreen with listview builder

Question

I want to create a canvas that the entire column is slideable. But the way I did (code below) in the listview.builder the scroll doesn't work. How could I resolve this? I need the full screen scroll to work.

I also tried using Expanded in the listview, it would work but the top text and bottom container are fixed, I don't want that.

I'm new to mobile development, kinda confused hahaha. The code:

class _CursosPageState extends State<CursosPage> {
  int count = 4;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.white,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             SizedBox(height: 15),
             Text(
               'text text text',
               style: TextStyle(fontSize: 20),
             ),
             // Expanded(
             //   child:
             ListView.builder(
                shrinkWrap: true,
                itemCount: count,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    margin: EdgeInsets.all(10),
                    height: 150,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(10),
                    ),
                   );
                  },
                ),
               // ),
               Center(
                 child: Container(
                   height: 150,
                   width: 300,
                   decoration: BoxDecoration(
                     color: Colors.red,
                     borderRadius: BorderRadius.circular(10),
                   ),
                  ),
                )
               ],
             ),
            ),
          ),
         );
        }
   }

Answer 1

You don't need to use SingleChildScrollView, You can use ListView as Toplevel widget.

class _CursosPageState extends State<CursosPage> {
  int count = 4;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          Container(
            color: Colors.white,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 15),
                Text(
                  'text text text',
                  style: TextStyle(fontSize: 20),
                ),
                for (int i = 0; i < count; i++)
                  Container(
                    margin: EdgeInsets.all(10),
                    height: 150,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                Center(
                  child: Container(
                    height: 150,
                    width: 300,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Or have fixed Text on top

class _CursosPageState extends State<CursosPage> {
  int count = 4;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 15),
            Text(
              'text text text',
              style: TextStyle(fontSize: 20),
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: count,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    margin: EdgeInsets.all(10),
                    height: 150,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(10),
                    ),
                  );
                },
              ),
            ),
            Center(
              child: Container(
                height: 150,
                width: 300,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Once you are flexible with listView you can use CustomScrollView for complex scenario