Question 345421 in Flutter Question posted in
The official Flutter documentation can be found here.

ListView Not Scrolling Inside Column in Flutter

I’m having trouble making a ListView scrollable within a Column in Flutter. The ListView displays correctly, but I cannot scroll through the items. I’ve tried several variations to extend the ListView to the bottom of the screen while keeping it scrollable and avoiding the "Bottom overflowed by x pixels" error, but none of my attempts have been successful.

Here’s the relevant part of my code:

Scaffold(
  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Padding(
        padding: const EdgeInsetsDirectional.only(bottom: 8.0, start: 8.0, end: 8.0, top: 20.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ...,
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                  ...,
                  Flexible(
                     fit: FlexFit.loose,
                     child: ListView.builder(
                       itemCount: ...
                       shrinkWrap: true,
                       itemBuilder: ....,
                  ),
              ],
            ),
           ],
         ),
         ...,
    ],
  ),
)

I’ve set mainAxisSize to MainAxisSize.min for the Column and used Flexible with FlexFit.loose for the ListView.builder in an attempt to make it scrollable. However, the ListView doesn’t scroll, and I’m trying to avoid the overflow error while ensuring the list extends to the bottom of the screen.

Tags:

2

Answers


  1. 0

    Wrap ListView with Expanded widget instead of Flexible widget and you can scroll it.

    children: <Widget>[
// Other widgets before ListView
    Expanded( // Wrap with Expanded
       child: ListView.builder(
            itemCount: ...,
            shrinkWrap: true,
            itemBuilder: ...,
           ),
      ),
 ],
    Login or Signup to reply.
  2. 0

    Try below code hope its help to you.

    Scaffold(
    body: Column(
      children: [
        Container(
          alignment: Alignment.center,
          height: 100,
          width: double.infinity,
          color: Colors.blue,
          child: Text('Your Other Widget If you want'),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: 100,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return Text(index.toString());
            },
          ),
        ),
        Container(
          alignment: Alignment.center,
          height: 100,
          width: double.infinity,
          color: Colors.green,
          child: Text('Your Other Widget If you want'),
        ),
      ],
    ),
  )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search