Facing RenderFlex overflowed issue with sliver appbar

Issue

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",
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    )),
              ),
            ),
          ),
        )

Answered By – goVishal

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.