Home > database >  flutter scrollview and SingleChildScrollView throws bottom overflow and is not scrolling
flutter scrollview and SingleChildScrollView throws bottom overflow and is not scrolling

Time:08-24

The widgets inside the child scroll view doesn't scroll and throws bottom overflow exception on the screen when there are more widgets in that list view. I am not sure where I am doing a mistake.

home: Scaffold(
      body: Column(
          children: [
              APPbar(),
              Container(
                 color: Colors.grey[200],
                 child: Expanded(
                     child: Column(
                         children: [
                            searchBar(),
                            Row(children: casewidgets),
                         ], 
                     )
                 ),
              )
            
             SingleChildScrollView(
                child:Column(
                   children: [
                       Text("a new column"),
                       Text("a new column"),
                       Text("a new column"),
                       Text("a new column"),
                   ],
               )
             ),
        ]
)),

CodePudding user response:

You can use Expanded on SingleChildScollView to get aviable height, and remove column's Expanded.

home: Scaffold(
    body: Column(children: [
  // APPbar(),
  Container(
    color: Colors.grey[200],
    child: Column(
      children: [
        // searchBar(),
        Row(children: []),
      ],
    ),
  ),
  Expanded(
    child: SingleChildScrollView(
        child: Column(
      children: [
        for (int i = 0; i < 33; i  ) Text("a new column"),
      ],
    )),
  ),
])),

CodePudding user response:

You cannot use expand when using a singlechildscrollview in appropriate way. First you need to understand that expand covers the maximum height and width on the screen or the specific section in which you use expand.

Instead of using SingleChildScrollView, It's easier to use CustomScrollView with a SliverFillRemaining. and it's works work's great.

    CustomScrollView(
            slivers: [
              SliverFillRemaining(
                hasScrollBody: false,
                child: Column(
                  children: <Widget>[
                    const Text('TextData'),
                    Expanded(
                      child: Container(
                        color: Colors.green,
                        child: Text("Your Text Data",),
                      ),
                    ),
                    const Text('Add Other Widgets'),
                  ],
                ),
              ),
            ],
          ),
  • Related