0

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 :)

Improve this question
1
  • Try wrapping widget in Flexible or Expanded Widgets Commented Jul 9, 2021 at 7:27

2 Answers 2

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

If you modify it like you answered, the height will disappear and the items will not be visible on the screen.
I did not get your comment! why items will disappear? do you have any repo for your code?
-1

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

Improve this answer

2 Comments

this maybe work in the given screen size, but it is not responsive!
I fixed it as answered and the error went away. But when I use the keyboard, another error occurs. Added keyboard-enabled widgets to the body. Sorry.