list view in column wrapped inside singlechild scrollview not scrolling flutter

Question

I want to achieve scrolling inside the list view in flutter.But the entire screen is scrolling here.Tried wrapping listview inside container and then in single child scroll view but that also doesnt work [1]: https://i.stack.imgur.com/1K3q0.png

    Scaffold(
     
      resizeToAvoidBottomInset: false,
      body: Container(
        height: double.maxFinite,
        // padding: const EdgeInsets.only(left: 8.0, right: 8),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              child: Card(
                elevation: 15,
                child: Container()
                //DashboardAppbar(emp: loggedinEmpDetails),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            selected == 0
                ? ListView(
                //  shrinkWrap: true,
                //   physics: NeverScrollableScrollPhysics(),
                 children: [
                   leaves == null
                       ? CircularProgressIndicator()
                       : DashboardCards(leaves!),
                   const SizedBox(
                     height: 10,
                   ),
                   for (int i = 0; i < userLeaves!.length; i++)
                     dashboardLeaveCards(
                         emp: employee![0],
                         userLeaves: userLeaves![i],
                         selected: selected,
                         leaveReasons: leaveReason),
                   const SizedBox(
                     height: 5,
                   )
                 ],
                    )
                : Column(

It will be easier if you update the snippet with minimal version that will not depend on others data — Md. Yeasin Sheikh, Aug 25 '22 at 17:43
Wrap ListVIew with Expanded, Also `dashboardLeaveCards` widget is unknown, find more about [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example) — Md. Yeasin Sheikh, Aug 25 '22 at 17:53
I fixed it ,it was my mistake that i didnt add tabbar view,the issue got resolved once it is added. — F sam, Aug 26 '22 at 09:57

Kaushik Chandru · Answer 1 · 2022-08-25T18:23:12.633

0

Add physics and shrinkWrap to the list view

ListView(
  shrinkWrap:true,
  physics : NeverScrollableScrollPhysics(),
)

And remove the inner SingleChildScrollView to which you added physics..

Edit

Instead of listview use List.generate


    Scaffold(
     
      resizeToAvoidBottomInset: false,
      body: Container(
        height: MediaQuery.of(context).size.height,
        // padding: const EdgeInsets.only(left: 8.0, right: 8),
        child:  Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              child: Card(
                elevation: 15,
                child: Container()
                //DashboardAppbar(emp: loggedinEmpDetails),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            selected == 0
                ? Expanded( 
              child:ListView(
              shrinkWrap: true,
                 // physics: NeverScrollableScrollPhysics(),
                 children: [
                   leaves == null
                       ? CircularProgressIndicator()
                       : DashboardCards(leaves!),
                   const SizedBox(
                     height: 10,
                   ),
                   for (int i = 0; i < userLeaves!.length; i++)
                     dashboardLeaveCards(
                         emp: employee![0],
                         userLeaves: userLeaves![i],
                         selected: selected,
                         leaveReasons: leaveReason),
                   const SizedBox(
                     height: 5,
                   )
                 ],
                    )
                : Column(
             mainAxisSize: MainAxisSize.min,
             )
)

edited Aug 25 '22 at 18:23

answered Aug 25 '22 at 17:13

Kaushik Chandru

15,510
2
12
30

tried,but doesnt work – F sam Aug 25 '22 at 17:15
im using multiple widgets inside the listview – F sam Aug 25 '22 at 17:27
Others are in column. So you can add it directly in the column and to add a list of items use list. Generate – Kaushik Chandru Aug 25 '22 at 17:28
I have added other widgets in comment there you can add other other widgets. – Kaushik Chandru Aug 25 '22 at 17:29
i have given condition also.if selected =0 then show list view otherwise show another column widgets,so i cannot take them out – F sam Aug 25 '22 at 17:31
Edited answer again – Kaushik Chandru Aug 25 '22 at 17:37
tried, doesnt work – F sam Aug 25 '22 at 17:52
Check now please. Added your own codes and fixes to it – Kaushik Chandru Aug 25 '22 at 18:03
the whole screen is scrolling now,want only the list view to scroll – F sam Aug 25 '22 at 18:14
Remove SingleChildScrollView and remove physics from listview. Edited the answer too – Kaushik Chandru Aug 25 '22 at 18:16
overflow pixel issue – F sam Aug 25 '22 at 18:21
Wrap the listview with an expanded widget – Kaushik Chandru Aug 25 '22 at 18:23
then also overflow issue – F sam Aug 25 '22 at 18:24
Which means it has no space for the listview to display – Kaushik Chandru Aug 25 '22 at 18:25
list view contains leavecards of length 10 if i add singlechild scrollview initially no overflow issue but whole screen scrolls – F sam Aug 25 '22 at 18:27
In leave cards if you have listview add shrinkwrap true, and if you have a column add mainAxisSize: MainAxisSize.min – Kaushik Chandru Aug 25 '22 at 18:28
leave cards returns the card widget inside which is a row – F sam Aug 25 '22 at 18:30
Thats fine. But it should work – Kaushik Chandru Aug 25 '22 at 18:31

Md. Yeasin Sheikh · Answer 2 · 2022-08-25T18:14:46.203

0

You don't need to wrap with multiple scrollable widget, just wrap ListView with Expanded widget, and follow this widget structure.

body: Column(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(
      width: MediaQuery.of(context).size.width,
      child: Card(elevation: 15, child: Container()
          //DashboardAppbar(emp: loggedinEmpDetails),
          ),
    ),
    const SizedBox(
      height: 10,
    ),
    selected == 0
        ? Expanded(
            child: ListView(
              children: [
                //  leaves == null
                //      ? CircularProgressIndicator()
                //      : DashboardCards(leaves!),
                const SizedBox(
                  height: 10,
                ),
                for (int i = 0; i < 4; i++)
                  Container(
                    height: 100,
                  ),
                const SizedBox(
                  height: 5,
                )
              ],
            ),
          )
        : SingleChildScrollView(
            child: Column(
              children: [],
            ),
          )
  ],
),
);

edited Aug 25 '22 at 18:14

answered Aug 25 '22 at 17:17

Md. Yeasin Sheikh

54,221
7
29
56

did you remove others scollable widget? – Md. Yeasin Sheikh Aug 25 '22 at 17:23
yes i removed the other scrollable widgets – F sam Aug 25 '22 at 17:25
Ok try current snippet – Md. Yeasin Sheikh Aug 25 '22 at 18:15
ovrflow pixel issue – F sam Aug 25 '22 at 18:17
Can you share an image or overflow – Md. Yeasin Sheikh Aug 25 '22 at 18:18

list view in column wrapped inside singlechild scrollview not scrolling flutter

2 Answers2