Faisal
Faisal

Reputation: 162

flutter scrollview and SingleChildScrollView throws bottom overflow and is not scrolling

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"),
                   ],
               )
             ),
        ]
)),

Upvotes: 0

Views: 3044

Answers (2)

Divyesh mehta
Divyesh mehta

Reputation: 464

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'),
                  ],
                ),
              ),
            ],
          ),

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63559

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"),
      ],
    )),
  ),
])),

Upvotes: 1

Related Questions