"A RenderFlex overflowed by 60 pixels on the bottom" error on flutter

Question

So, i'm trying to make a page like this one, but now i'm getting a error with overflow:

I saw online some people fixed this using SingleChildScrollView, but the article above uses NestedScrollView for using the slivers, so i'm not sure how to do it.

I also tryed to put Extended all over the place, because of the error below, but nothing worked.

The code is that one: (The full code is available on my github)

return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Color(0x00ffffff),
        title: Text('Account'),
      ),
      body: DefaultTabController(
        length: 2,
        child: RefreshIndicator(
          onRefresh: getArtistImage,
          key: _refreshIndicatorKey,
          child: NestedScrollView(
            headerSliverBuilder: (context, _) {
              return [
                SliverList(
                  delegate: SliverChildListDelegate([
                    Column(
                      children: <Widget>[
                        !loaded
                            ? SafeArea(
                          top: true,
                          child: Column(
                            children: <Widget>[
                              Container(
                                child: LinearProgressIndicator(
                                  backgroundColor: whiteLoadingBackground,
                                  valueColor: AlwaysStoppedAnimation(
                                      Colors.white60),
                                ),
                                height: 3,
                              ),
                              UserProfile(widget.user, recentTracks)
                            ],
                          ),
                        )
                            : Container(
                            child: Stack(
                              children: <Widget>[
                                Container(
                                  height: MediaQuery
                                      .of(context)
                                      .size
                                      .width,
                                  decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        colors: [
                                          Color(0x56000000),
                                          Color(0x88000000),
                                          Color(0xff000000)
                                        ],
                                        begin: FractionalOffset.topCenter,
                                        end: AlignmentDirectional.bottomCenter,
                                      )),
                                ),
                                PageModel(
                                    title: 'My Account',
                                    children: UserProfile(
                                        widget.user, recentTracks))
                              ],
                            ),
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(artistImage),
                                  alignment: Alignment.topCenter,
                                  fit: BoxFit.fitWidth),
                            ))
                      ],
                    ),
                  ]),
                )
              ];
            },
            physics:
            AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
            body: Column(
              children: <Widget>[
                TabBar(
                  tabs: <Widget>[
                    Tab(
                      text: 'Last Scrobbles',
                      icon: Icon(Icons.queue_music),
                    ),
                    Tab(
                      text: 'Charts',
                      icon: Icon(Icons.show_chart),
                    )
                  ],
                ),
                Expanded(
                  child: TabBarView(
                    children: <Widget>[
                      recentTracks != null
                          ? Container(
                        child: UserBottomInformation(
                            widget.user, recentTracks),
                      )
                          : Text('ue'),
                      Text('pag 2')
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );

score 0 · Answer 1 · answered Apr 17 '20 at 20:41

Inside the column which displays the TabBar and TabBarView you are only wrapping the TabBarView with Expanded while what you should do is wrap both children with Expanded and specify a flex factor for each (flex factor will decide how much percentage of the space given to the column will each child occupy) like this:

 Column(
      children: <Widget>[
        Expanded(
          flex: ,//some value here
          child: TabBar(
            tabs: <Widget>[
              Tab(
                text: 'Last Scrobbles',
                icon: Icon(Icons.queue_music),
              ),
              Tab(
                text: 'Charts',
                icon: Icon(Icons.show_chart),
              )
            ],
          ),
        ),
        Expanded(
          flex: ,//some value here
          child: TabBarView(
            children: <Widget>[
              recentTracks != null
                  ? Container(
                child: UserBottomInformation(
                    widget.user, recentTracks),
              )
                  : Text('ue'),
              Text('pag 2')
            ],
          ),
        )
      ],
    );

didnt worked to me. its pretty weird also: https://i.imgur.com/ACDfVCP.gifv — Matheus Dias, Apr 17 '20 at 23:03

score 0 · Answer 2 · answered Apr 18 '20 at 07:39

Column(
 children:<Widget>[
  Flexible(child:put your child here),
  Flexible(child:put your child here),
  Flexible(child:put your child here),
  ..,
 ]
)

Consider using flex: property of Flexible widget which tells what portion of available space should the child consume if this is a scrollable just wrap the Column inside a SingleChildScrollView

"A RenderFlex overflowed by 60 pixels on the bottom" error on flutter

2 Answers2