flutter A RenderFlex overflowed by 271 pixels on the bottom

Question

Hello I am using SingleChildScrollView and I am getting this error 'A RenderFlex is overflowing with 271 pixels at the bottom'. I think it's because you're using the appBar's PreferredSize and tabBarview. Sorry for the long code.

• A widget that uses a abbar tabbarView.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(kToolbarHeight),
        child: Container(
          color: Colors.black,
          child: SafeArea(
              child: Column(
            children: [
              TabBar(
                indicatorColor: Colors.grey,
                controller: this._tabController,
                tabs: [
                  Tab(
                    text: 'MOVIE',
                  ),
                  Tab(
                    text: 'TV',
                  ),
                ],
              ),
            ],
          )),
        ),
      ),
      // bottom:

      body: TabBarView(
        controller: this._tabController,
        children: [
          Column(
            children: [
              search(),
              this.movieName.isNotEmpty ? searchMovieTile() : Container(),
            ],
          ),
          Column(
            children: [
              search(),
              this.movieName.isNotEmpty ? searchTvTile() : Container(),
            ],
          )
        ],
      ),
    );
  }

• A widget that uses a SingleChildScrollView.

Widget searchMovieTile() {
    return FutureBuilder(
      future: this._searchController.searchMovie(movieName: this.movieName),
      builder:
          (BuildContext context, AsyncSnapshot<List<SearchModel>> snapshot) {
        if (snapshot.hasData) {
          return Consumer<SearchProvider>(
            builder: (context, value, child) {
              return snapshot.data!.isEmpty
                  ? Container()
                  : SingleChildScrollView(
                      child: Container(
                        height: MediaQuery.of(context).size.height,
                        child: GridView.count(
                          childAspectRatio: 2 / 3,
                          mainAxisSpacing: 10.0,
                          crossAxisSpacing: 10.0,
                          crossAxisCount: 3,
                          children: List.generate(
                            snapshot.data!.length,
                            (index) => ClipRRect(
                              borderRadius: BorderRadius.circular(15.0),
                              child: snapshot.data![index].posterPath.isEmpty
                                  ? Container(
                                      child: Center(
                                        child: Text(
                                          'Image preparation',
                                          style: TextStyle(color: Colors.white),
                                        ),
                                      ),
                                    )
                                  : GestureDetector(
                                      onTap: () {
                                        Navigator.of(context).push(
                                            MaterialPageRoute(builder:
                                                (BuildContext context) {
                                          return MultiProvider(
                                            providers: [
                                              ChangeNotifierProvider(
                                                  create: (BuildContext
                                                          context) =>
                                                      MovieDetailProvider()),
                                              ChangeNotifierProvider(
                                                  create:
                                                      (BuildContext context) =>
                                                          MovieVideoProvider()),
                                            ],
                                            child: SearchMovieDetailScreen(
                                                movieData:
                                                    snapshot.data![index]),
                                          );
                                        }));
                                      },
                                      child: CachedNetworkImage(
                                        fit: BoxFit.cover,
                                        imageUrl:
                                            'https://image.tmdb.org/t/p/original/${snapshot.data![index].posterPath}',
                                      ),
                                    ),
                            ),
                          ),
                        ),
                      ),
                    );
            },
          );
        } else {
          return Container();
        }
      },
    );
  }

• A widget that uses a textfield keyboard.

Widget search() {
    return Container(
      padding: EdgeInsets.only(
        left: 5.0,
        top: 10.0,
        right: 5.0,
        bottom: 10.0,
      ),
      child: Row(
        children: [
          Expanded(
            flex: 6,
            child: TextField(
              onSubmitted: (String name) {
                this.movieName = this._textEditingController.text;
                print(this.movieName);
              },
              cursorColor: Colors.grey,
              focusNode: this._focusNode,
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
              ),
              controller: this._textEditingController,
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.grey[900],
                prefixIcon: Icon(
                  Icons.search,
                  color: Colors.grey,
                  size: 20.0,
                ),
                suffixIcon: this._focusNode.hasFocus
                    ? IconButton(
                        onPressed: () {
                          setState(() {
                            this._textEditingController.clear();
                          });
                        },
                        icon: Icon(
                          Icons.cancel,
                          size: 20.0,
                          color: Colors.grey,
                        ),
                      )
                    : Container(),
                hintText: 'Search',
                hintStyle: TextStyle(color: Colors.grey),
                labelStyle: TextStyle(color: Colors.white),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.transparent,
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.transparent,
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.transparent,
                  ),
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
            ),
          ),
          this._focusNode.hasFocus
              ? Expanded(
                  child: TextButton(
                  child: Text(
                    'cancel',
                    style: TextStyle(
                      fontSize: 13.0,
                      color: Colors.grey,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      this._textEditingController.clear();
                      this._focusNode.unfocus();
                    });
                  },
                ))
              : Expanded(flex: 0, child: Container())
        ],
      ),
    );
  }

Sorry for the low level of the question, but I'd appreciate it if you could answer :)

Answer 1

I think this problem is due to the given height to the container (child of SingleChildScrollView:

SingleChildScrollView(
                      child: Container(
                        **height: MediaQuery.of(context).size.height,**
                        child: GridView.count(

just remove it and let me know the result.

Answer 2

try : height: MediaQuery.of(context).size.height - 280,