How To Make The Column Scrollable In Flutter Web?

Issue

The Parent Widget Is Column,
Column Contains the following children:

  • STACK
  • CONTAINER(CHILD: ROW)
  • ROW(CHILDREN: [GESTUREDETECTOR(child:Container), GESTUREDETECTOR(child:Container)]
  • LISTVIEW BUILDER

Wrapping this column with expanded, and then with singlechildScrollView. The result is the error!!

WHAT TO DO??

Solution

Wrap Column with SinglechildScrollView, for ListView.builder you need to set:

    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,

In your case widget tree will look like this (minimal reproducible sample)

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SingleChildScrollView',
      home: Scaffold(
          appBar: AppBar(
            title: Text('SingleChildScrollView Example'),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Stack(
                  children: [
                    Container(
                      width: 50,
                      height: 50,
                      color: Colors.cyan,
                    ),
                  ],
                ),
                Container(
                  child: Row(
                    children: [
                      GestureDetector(
                        child: Container(
                          width: 50,
                          height: 50,
                          color: Colors.green,
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          width: 50,
                          height: 50,
                          color: Colors.blue,
                        ),
                      ),
                    ],
                  ),
                ),
                ListView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: 60,
                  itemBuilder: (context, index) => Text('Item # $index'),
                )
              ],
            ),
          )),
    );
  }
}

And it scrolls.

Answered By – Simon Sot

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.