Home > Software design >  list view in column wrapped inside singlechild scrollview not scrolling flutter
list view in column wrapped inside singlechild scrollview not scrolling flutter

Time:08-26

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(

CodePudding user response:

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: [],
            ),
          )
  ],
),
);

CodePudding user response:

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,
             )
)
  • Related