androidflutterdartflutter-layout
carousel slider "A RenderFlex overflowed by Infinity pixels on the bottom." flutter
I am building a home page for that I have created a hidden drawer on a separate page and a home screen on separate and stack both 'hidden drawer & 'home screen on the home page and also created foldable search button on the home screen along with the menu button on the same row with margin:spaceBetween .
I have created carousel slider on a separate page for 2nd row on home page i.e. down below the search & menu button and call that carousel slider on home page but showing error
"A RenderFlex overflowed by Infinity pixels on the bottom"
And why is it on bottom when I tried to add it on top. I have tried every possible padding & spacing but nothing work, please help
DevTools layout
Code of home screen
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool _folded = true;
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: Column(
children: [
SizedBox(
height: 40,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close1.svg",
height: getProportionateScreenHeight(18),
color: Colors.black54),
),
onTap: () {
setState(() {
_folded = !_folded;
});
}),
),
)
],
),
),
),
],
),
Row(
children: [ImageSlider()],
)
],
),
);
}
}
Code OF the carousel slider
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st ImageSlider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/13.jpg"),
fit: BoxFit.cover,
),
),
),
//2nd Image of Slider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/15.jpg"),
fit: BoxFit.cover,
),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/3.jpg"),
fit: BoxFit.cover,
),
),
),
],
//Slider Container properties
options: CarouselOptions(
// height: getProportionateScreenHeight(50),
height: 50,
autoPlay: true,
reverse: true,
enlargeCenterPage: true,
autoPlayInterval: Duration(seconds: 2),
),
),
],
),
);
}
Solution
For Single child wrap with Expanded(child: ImageSlider()), and it will take extra spaces.
While using row
Expanded(
child: Row(
children: [
// will take full spaces but width- IconSize
Flexible(
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
or just wrap with SizedBox
SizedBox(
height: 200,
child: Row(
/// controll position
children: [
SizedBox(
width: 100,
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
Test Widgets
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool _folded = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedContainer(
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 40,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
// height: getProportionateScreenHeight(50),
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close1.svg",
// height: getProportionateScreenHeight(18),
height: 18,
color: Colors.black54),
),
onTap: () {
setState(() {
_folded = !_folded;
});
}),
),
)
],
),
),
),
],
),
//For Single, will take full spaces
// Expanded(child: ImageSlider()),
/// with rows, could be use [Flexible]
Expanded(
child: Row(
children: [
// will take full spaces but width- IconSize
Flexible(
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
/// or just wrap with SizedBOx
SizedBox(
height: 200,
child: Row(
/// controll position
children: [
SizedBox(
width: 100,
child: ImageSlider(),
),
Icon(Icons.ac_unit),
],
),
),
Container(
height: 200,
child: Text("Extra Bottom Part "),
color: Colors.blueGrey,
width: double.infinity,
),
],
),
),
);
}
}
class ImageSlider extends StatefulWidget {
ImageSlider({Key? key}) : super(key: key);
@override
_ImageSliderState createState() => _ImageSliderState();
}
class _ImageSliderState extends State<ImageSlider> {
Widget build(BuildContext context) {
return Scaffold(
body: ListView(children: [
CarouselSlider(
items: [
//1st ImageSlider
Container(
padding: EdgeInsets.only(bottom: 20),
height: 100,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(8.0),
// image: DecorationImage(
// image: AssetImage("assets/images/13.jpg"),
// fit: BoxFit.cover,
// ),
),
),
//2nd Image of Slider
Container(
padding: EdgeInsets.only(bottom: 20),
height: 100,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(8.0),
// image: DecorationImage(
// image: AssetImage("assets/images/15.jpg"),
// fit: BoxFit.cover,
// ),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.circular(8.0),
// image: DecorationImage(
// image: AssetImage("assets/images/3.jpg"),
// fit: BoxFit.cover,
// ),
),
),
],
//Slider Container properties
options: CarouselOptions(
// height: getProportionateScreenHeight(50),
height: 50,
autoPlay: true,
reverse: true,
enlargeCenterPage: true,
autoPlayInterval: Duration(seconds: 2),
),
),
]),
);
}
}