面对 sliver appbar 的 RenderFlex 溢出问题答案

【问题标题】：Facing RenderFlex overflowed issue with sliver appbar面对 sliver appbar 的 RenderFlex 溢出问题
【发布时间】：2020-11-08 01:43:10
【问题描述】：

我在 sliver appbar 中面临 RenderFlex 溢出问题，我尝试了Expanded widget，但直到现在还不好。当向上滚动时会发生这种情况。我该如何解决？

错误

一个 RenderFlex 在底部溢出了 62 个像素。

代码

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

        ),
      ),

【问题讨论】：

标签： flutter flutter-sliver sliverappbar

【解决方案1】：

您可以使用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",
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    )),
              ),
            ),
          ),
        )

【讨论】：