0

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
                      ],
                    ),
                  ),
                ),
            ],
          ),
        ),
      );
}
6
  • Can you provide minimal-reproducible-example Commented Jun 12, 2022 at 13:13
  • @YeasinSheikh Code added Commented Jun 12, 2022 at 13:28
  • This widget doesnt reproduce any issue Commented Jun 12, 2022 at 16:33
  • @YeasinSheikh Instead of Scaffold, if you use SingleChildScrollView, then it will not make page scrollable because of ListViews. Commented Jun 13, 2022 at 5:54
  • try this stackoverflow.com/questions/60579335/… Commented Jun 13, 2022 at 6:38

1 Answer 1

0

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,),
          ],
        ),
      );
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.