Using ListView in SingleChildScrollView

Question

I am working on a web design where I need to create several ListViews in one page. Now, I also want that my whole page will also be scrollable like a webpage. What happening is that with SingleChildScrollView ListViews stop scrolling. I am using Expanded and tried several ways but unable to find a solution. Anybody, knows how to solve this? Thank you very much in advance.

class SchemaPage extends StatelessWidget {
  final String text;

  SchemaPage({Key? key, required this.text}) : super(key: key);

  //If I use SingleChildScrollView here, My list views stop scrolling but If I remove ListView, it works fine. 
  Widget build(BuildContext context) => Scaffold(
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              AppBar(), //Custom App Bar
              SizedBox(
                height: 15,),
                Expanded(
                  flex: 2,
                  child: Container(
                    width: 264,
                    padding: EdgeInsets.all(36),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Scheme',
                          style: TextStyle(
                              fontFamily: 'Roboto',
                              fontSize: 24,
                              fontWeight: FontWeight.w700,
                              color: Colors.black),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          'Person',
                          style: TextStyle(
                              fontFamily: 'Roboto',
                              fontSize: 20,
                              fontWeight: FontWeight.w700,
                              color: Colors.black),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Expanded(
                          flex:4,
                          child: Container(
                            child: ListView(
                              shrinkWrap: true,
                              children: [
                                SizedBox(
                                  height: 10,
                                ),
                                PersonWidget(),
                       
                                SizedBox(
                                  height: 10,
                                ),
                                                                                                      
                                PersonWidget(),
                                SizedBox(
                                  height: 10,
                                ),
                                PersonWidget(),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 5,
                        ),
                        InkWell(
                          child: Text('more',
                              style: TextStyle(
                                  fontFamily: 'Roboto',
                                  fontSize: 14,
                                  fontWeight: FontWeight.w700)),
                          onTap: () {},
                        ),
                        SizedBox(height: 30,),
                        Text(
                          'Person',
                          style: TextStyle(
                              fontFamily: 'Roboto',
                              fontSize: 20,
                              fontWeight: FontWeight.w700,
                              color: Colors.black),
                        ),
                        SizedBox(height: 30,),
                       //Here I wanted to use another ListView but I need to make page scrollable
                      ],
                    ),
                  ),
                ),
            ],
          ),
        ),
      );
}

Can you provide [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example) — Md. Yeasin Sheikh, Jun 12 '22 at 13:13
@YeasinSheikh Instead of Scaffold, if you use SingleChildScrollView, then it will not make page scrollable because of ListViews. — WasimSafdar, Jun 13 '22 at 05:54
try this https://stackoverflow.com/questions/60579335/flutter-listview-scroll-parent-listview-when-child-listview-reach-bottom-c — anggadaz, Jun 13 '22 at 06:38

score 0 · Answer 1 · answered Jun 13 '22 at 09:13

I found the solution. With SingleChildScollView() widget, I do not need to use Expanded widget. Moreover, I need to give my ListView() fixed height by wrapping it either in Container() widget or SizedBox() widget.

class SchemaPage extends StatelessWidget {
  final String text;

  SchemaPage({Key? key, required this.text}) : super(key: key);

  Widget build(BuildContext context) => SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 110, child: AppBar()),
            Container(
              padding: EdgeInsets.all(36),
              child: Text(
                'Schema',
                style: TextStyle(
                    fontFamily: 'Roboto',
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                    color: Colors.black),
              ),
            ),
            Container(
              padding: EdgeInsets.only(left: 36),
              child: Text(
                'Person',
                style: TextStyle(
                    fontFamily: 'Roboto',
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: Colors.black),
              ),
            ),
            Container(
              padding: EdgeInsets.only(left: 36),
              width: 264,
              height: 300,
              child: ListView(
                //physics: ClampingScrollPhysics(),
                shrinkWrap: true,
                children: [
                  SizedBox(
                    height: 10,
                  ),
                  PersonWidget(),
                  SizedBox(
                    height: 10,
                  ),
                  PersonWidget(),
                  SizedBox(
                    height: 10,
                  ),
                  PersonWidget(),
                  SizedBox(
                    height: 10,
                  ),
                 PersonWidget(),
                ],
              ),
            ),

            SizedBox(
              height: 5,
            ),
            Container(
              padding: EdgeInsets.only(left: 36),
              child: InkWell(
                child: Text('More',
                    style: TextStyle(
                        fontFamily: 'Roboto',
                        fontSize: 14,
                        fontWeight: FontWeight.w700)),
                onTap: () {},
              ),
            ),
            SizedBox(height: 30,),
            Container(
              padding: EdgeInsets.only(left: 36),
              child: Text(
                'Plans',
                style: TextStyle(
                    fontFamily: 'Roboto',
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: Colors.black),
              ),
            ),
            SizedBox(height: 30,),
          ],
        ),
      );
}

Using ListView in SingleChildScrollView

1 Answers1