Search code examples
flutterflutter-sliversliverappbar

Facing RenderFlex overflowed issue with sliver appbar


I am facing below RenderFlex overflowed issue in sliver appbar, I tried Expanded widget but not good till now. this happens when the scrolling is done upwards. How should I resolve it?

ERROR

A RenderFlex overflowed by 62 pixels on the bottom.

CODE

         SliverAppBar(

        expandedHeight: 120.0,
        floating: true,
        pinned: false,
        snap: true,
        elevation: 40,
        backgroundColor: Colors.orange,
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Padding(
              padding: const EdgeInsets.only(top: 25),
              child: Column( // error is pointed to this in logs
                  children: <Widget>[
                  SizedBox(height: 15,),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[

                      Text('DETAILS OF THE TEXT',
                          
                      ),
                      Text(widget.detail1,
                          ),
                    ],),


                  SizedBox(height: 5,),

                 Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[


                           Column(children: <Widget>[

                            Text('detail2',
                                ),
                            SizedBox(width: 5,),
                            Text(widget.detailing),
                          ],),

                        SizedBox(width: 20,),
                           Column(children: <Widget>[
                            Text('detail3',
                                ),
                            SizedBox(width: 10,),
                            Text(widget.detailing4, ),
                          ],), ],),],    )

        ),
      ),

Solution

  • You can use SingleChildScrollView

                SliverAppBar(
              expandedHeight: 120.0,
              floating: true,
              pinned: false,
              snap: true,
              elevation: 40,
              backgroundColor: Colors.orange,
    
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: SizedBox(
                  height: 120,
                  child: SingleChildScrollView(
                        child: Padding(
                        padding: const EdgeInsets.only(top: 25),
                        child: Column(
                          children: <Widget>[
                            SizedBox(
                              height: 15,
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  'DETAILS OF THE TEXT',
                                ),
                                Text(
                                  "widget.detail1",
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                                                          child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Column(
                                    children: <Widget>[
                                      Text(
                                        'detail2',
                                      ),
                                      SizedBox(
                                        width: 5,
                                      ),
                                      Text("widget.detailing"),
                                    ],
                                  ),
                                  SizedBox(
                                    width: 20,
                                  ),
                                  Column(
                                    children: <Widget>[
                                      Text(
                                        'detail3',
                                      ),
                                      SizedBox(
                                        width: 10,
                                      ),
                                      Text(
                                        "widget.detailing4",
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        )),
                  ),
                ),
              ),
            )