skip to Main Content

I was to layout a page that has a side menu and a top menu that don’t move. I wanted the rest of the page to be scrollable. I have wrapped my column in a singlechildscrollview but nothing happens. I still get an overflow error and cannot scroll. Could someone tell me what I did wrong?

 Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        child: Row(
          children: [
            const SideMenu(),
            Expanded(
              child: Column(
                children: [
                  Container(
                    height: 75.0,
                    color: Colors.blue,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      children: const [
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 25.0),
                          child: Text(
                            'data',
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 25.0),
                          child: Text('data'),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 25.0),
                          child: Text(
                            'data',
                          ),
                        ),
                      ],
                    ),
                  ),
                  SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text(
                          'Test Text',
                          style: TextStyle(
                            fontSize: 155.0,
                          ),
                        ),
                        Text(
                          'Test Text',
                          style: TextStyle(
                            fontSize: 155.0,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2

Answers


  1. you have to know behaviour of SingleChildScrollView

    try this

    Row(
     children:[
      SideMenu(),
      Expanded(
       child: Column(
         children:[ 
           Container(),
           Expanded(  // add this.
             child: SingleChildScrollView(),
    ....
    
    Login or Signup to reply.
  2. You should wrap your Expanded widget with a SingleChildScrollView instead of just the Column. Here’s the code:

    
      Widget build(BuildContext context) {
        return  Scaffold(
          body: Container(
            color: Colors.red,
            child: Row(
              children: [
                const SideMenu(),
                Expanded(
                  child: Column(
                    children: [
                      Container(
                        height: 75.0,
                        color: Colors.blue,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          mainAxisSize: MainAxisSize.max,
                          children: const [
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 25.0),
                              child: Text(
                                'data',
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 25.0),
                              child: Text('data'),
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 25.0),
                              child: Text(
                                'data',
                              ),
                            ),
                          ],
                        ),
                      ),
                      Expanded(
                        child: SingleChildScrollView(
                          child: Column(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: const [
                              Text(
                                'Test Text',
                                style: TextStyle(
                                  fontSize: 155.0,
                                ),
                              ),
                              Text(
                                'Test Text',
                                style: TextStyle(
                                  fontSize: 155.0,
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
      
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search