How to make the List scrollable in the drawer

Question

I want to make the inner column scrollable. how can i acheive it,tried replacing with list view,and Single child scroll view but not working This is the widget structure

  >Drawer
  >>Container
    >>>SingleChildScrollView(never Scrollable)
       >>>>Column
          >>>>>Drawer Header
          >>>>>Column
          >>>>>ListView.builder(never scrollble physics)
          >>>>>Row

Please Help

does this answer your question? https://stackoverflow.com/questions/57869679/implement-a-scrollable-drawer-with-flutter-it-shows-a-bottom-overflow-when-i-ro — Ahmad Raza, Dec 13 '22 at 07:18

PurplePolyhedron · Answer 1 · 2022-12-13T07:38:05.470

1

You need something to limit the height of the ListView when it is used inside scrollable. The easiest way is to set shrinkWrap property of ListView to true.

see Vertical viewport was given unbounded height

edited Dec 13 '22 at 07:38

answered Dec 13 '22 at 07:24

PurplePolyhedron

286
6

not working .."RenderFlex children have non-zero flex but incoming height constraints are unbounded. The relevant error-causing widget was Column" – F sam Dec 13 '22 at 07:30
I forgot about the `SingleChildScrollView` in my previous answer, it should be working now. – PurplePolyhedron Dec 13 '22 at 07:39

score 0 · Answer 2 · answered Dec 13 '22 at 07:51

Try this one once and let us know.

Here the SingleChildScrollView widget is used to wrap the inner Column widget, allowing it to be scrollable.

   Scaffold(
  drawer: Drawer(
    child: Container(
      child: SingleChildScrollView(
        child: Column(
          children: [
            DrawerHeader(),
            SingleChildScrollView(
              child: Column(
                children: [
                  // your scrollable content
                ],
              ),
            ),
            ListView.builder(
              physics: AlwaysScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                // return a widget for each item in your list
              },
            ),
            Row(
              children: [
                // other content
              ],
            ),
          ],
        ),
      ),
    ),
  ),
  // other properties of the Scaffold widget
)

score 0 · Answer 3 · answered Dec 13 '22 at 10:14

First of all create a List<Map<String, dynamic>> in which your content and their action will be stored i.e.

final _actions = [
    {'name': 'My Profile', 'onTap': () {}},
    {'name': 'Setting', 'onTap': () {}},
    {'name': 'Terms and Conditions', 'onTap': () {}},
    {'name': 'Privacy Policy', 'onTap': () {}},
  ];

Then you can implement your drawer

drawer: Drawer(
  child: Column(
    children: [
      const UserAccountsDrawerHeader(
        accountName: Text('accountName'),
        accountEmail: Text('accountEmail'),
      ),
      Expanded(
        child: ListView.builder(
          itemBuilder: (_, i) {
            final action = _actions[i];
            return ListTile(
              onTap: (action['onTap'] as VoidCallback),
              title: Text((action['name'] as String?) ?? ''),
            );
          },
          itemCount: _actions.length,
        ),
      )
    ],
  ),
),

How to make the List scrollable in the drawer

3 Answers3