Develop Reference

A RenderFlex overflowed by 227 pixels on the bottom in flutter

I am trying to create a welcome screen using flutter ,but when I change the device orientation to landscape it gives me an error.
What I am trying to do is that When the user changes the device orientation to landscape the content should reduce it size to the available size I don't want to wrap it in SingleChildScrollView.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 227 pixels on the bottom.
The relevant error-causing widget was:
Column Column:/lib/welcome.dart:18:15
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#44483 relayoutBoundary=up1 OVERFLOWING:
needs compositing
creator: Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#1ab81 ink renderer] ← NotificationListener ←
PhysicalModel ← AnimatedPhysicalModel ← ⋯
parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
constraints: BoxConstraints(0.0<=w<=638.0, 0.0<=h<=360.0)
size: Size(638.0, 360.0)
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
I tried to wrap the entire body in an Expanded and Flexible widget but it shows
Another exception was thrown: Incorrect use of ParentDataWidget.
Another exception was thrown: Every child of a RenderCustomMultiChildLayoutBox must have an ID in its parent data.
How can I reduce the content size when orientation changes to landscape ?
This is my code:
home: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xffFEF3F0),
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(
child: Container(
child: Image.asset(
'images/blogg.png',
width: 201.6,
height: 100,
fit: BoxFit.cover,
),
),
),
),
Text(
'Express more than writings',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
SizedBox(height: 20),
Container(
child: Image.asset(
'images/drib1.PNG',
height: 300,
fit: BoxFit.cover,
),
),
SizedBox(height: 50),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Register()),
);
},
child: Text('Join for free'),
),
SizedBox(height: 20),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => login()),
);
},
child: Text(
"if you have an account,Sign in",
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
)),

You'll have to set a SizedBox with the screen height at the parent of your Column widget:
Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xffFEF3F0),
body: SizedBox(
height: double.infinity,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(

As mentioned in the comment you can use the LayoutBuilder :
You can either only influence the height of your widgets with it (if you don't want to change the layout):
LayoutBuilder(
builder: (context,constraints) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(
child: Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
// width: 201.6,
height: constraints.maxHeight*0.2,
fit: BoxFit.cover,
),
),
),
const Text(
'Express more than writings',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
const SizedBox(height: 20),
Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
height: constraints.maxHeight*0.35,
fit: BoxFit.cover,
),
SizedBox(height: constraints.maxHeight*0.04),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {},
child: const Text('Join for free'),
),
SizedBox(height: constraints.maxHeight*0.01),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {},
child: const Text(
'if you have an account,Sign in',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
);
}
),
),
or you set a breakpoint from which your layout should change:
LayoutBuilder(
builder: (context, constraints) {
final maxHeight = constraints.maxHeight;
if (maxHeight > 500) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Center(
child: Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
// width: 201.6,
height: maxHeight * 0.2,
fit: BoxFit.cover,
),
),
),
const Text(
'Express more than writings',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
const SizedBox(height: 20),
Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
height: maxHeight * 0.35,
fit: BoxFit.cover,
),
SizedBox(height: maxHeight * 0.04),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {},
child: const Text('Join for free'),
),
SizedBox(height: maxHeight * 0.01),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {},
child: const Text(
'if you have an account,Sign in',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
);
}
return Center(
child: Column(
children: [
const SizedBox(height: 20),
Image.network(
'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
height: maxHeight * 0.5,
fit: BoxFit.cover,
),
const Text(
'Express more than writings',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
SizedBox(height: maxHeight * 0.04),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.white,
shadowColor: Color(0xff7d817e),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0)),
minimumSize: Size(330, 45),
),
onPressed: () {},
child: const Text('Join for free'),
),
SizedBox(height: maxHeight * 0.01),
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
return Colors.transparent;
},
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () {},
child: const Text(
'if you have an account,Sign in',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
)
],
),
);
},
),
If you use the second way it's better to make an own widget for the layout, otherwise your code gets unclear.

use textField and listview.builder in bottom sheet

Hey everyone I'm new to flutter and I have a problem.
I want to create an application that users after tapping on the Btn the bottom sheet will be open and after that ( here problem ) show the text field(for search) and the listView.
problem: when I do this nothing show me( even the bottom sheet don't appear)
this is my code :
enter code here
GestureDetector(
onTap: () {
showModalBottomSheet(
// ---------------------//
context: context,
builder: (context) {
return Container(
color: Color(0xff737373),
// to make the radius visible
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))),
child: countriesInfo == null
? Center(
child: CircularProgressIndicator(),
)
: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: TextField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'country',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
),
),
ListView.builder(
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
_selectItem(countriesInfo[index]);
},
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
height: 50,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 10, offset: Offset(0, 10))],
),
child: Row(
children: [
Image.network(
countriesInfo[index]._flag,
width: 50,
height: 50,
),
Text(
countriesInfo[index]._name,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
),
],
), // name of the country
),
);
},
itemCount: countriesInfo == null ? 0 : countriesInfo.length,
),
],
)),
);
}); // end bottom nav
},
child: Container(
width: double.infinity,
margin: EdgeInsets.all(35),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(color: Color(0xFFA3A3A3), borderRadius: BorderRadius.all(Radius.circular(15))),
child: Center(
child: Text(
"${selectedCountry == null ? countriesInfo[0].name : selectedCountry!.name.toString()}",
style: TextStyle(fontSize: 18),
),
),
),
),
if know any documentation or idea tell me please thank you.

How can I vertically center all the widgets inside a ListView?

I have this main screen with a ListView:
Screenshot
I decided to use a ListView as it resulted in screen overflow error each time the keyboard opened up.
This is my code:
ListView(children: [
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(top: 46.0, bottom: 8),
child: ClipRect(
child: Image.asset(
'images/icon.png',
scale: 2,
),
),
),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
child: TextField(
controller: _word,
textAlign: TextAlign.center,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
_word.text = '';
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
filled: true,
fillColor: Colors.lightGreen[200],
hintStyle: TextStyle(color: Colors.green),
hintText: 'Enter a word',
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(top: 16, bottom: 12),
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 65, height: 65),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(CircleBorder())),
child: Icon(Icons.search),
onPressed: () async {
detectNetStatus(context);
String word = _word.text;
_word.text = '';
Navigator.push(context, MaterialPageRoute(builder: (context) {
return word == '' ? RandomResults() : Results(word);
}));
}),
),
),
),
]),
I've also used the Align widget on all the three screen widgets. But it seems that the use of Align practically has no effect on the placement of the three widgets.
I want to place the three widgets in such a way that the space above and below the three widgets is equal (or in other words, I want to group and place them in a vertically centered alignment).

This code will help you to get the concepet. if you need layoutSize wrap Stack with LayoutoutBuilder to get the constrains.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(top: 46.0, bottom: 8),
child: ClipRect(
child: Image.asset(
// 'images/icon.png',
"assets/me.jpg",
scale: 2,
),
),
),
),
Align(
/// change this value according to your desire
alignment: Alignment(0, .2),
child: ListView(
shrinkWrap: true,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24.0, vertical: 12.0),
child: TextField(
// controller: _word,F
textAlign: TextAlign.center,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
// _word.text = '';
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
filled: true,
fillColor: Colors.lightGreen[200],
hintStyle: TextStyle(color: Colors.green),
hintText: 'Enter a word',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 16, bottom: 12),
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 65, height: 65),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(
CircleBorder())),
child: Icon(Icons.search),
onPressed: () async {
// detectNetStatus(context);
// String word = _word.text;
// _word.text = '';
// Navigator.push(context,
// MaterialPageRoute(builder: (context) {
// return word == '' ? RandomResults() : Results(word);
// }));
}),
),
),
],
),
),
],
),
);
}

Here is the solution for your code to align the widget with centered with using of the Flex widget.
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: viewportConstraints.copyWith(
minHeight: viewportConstraints.maxHeight,
maxHeight: double.infinity,
),
child: Flex(
direction: Axis.vertical,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRect(
child: Image.asset(
"images/icon.png",
scale: 2,
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10.0, vertical: 30.0),
child: TextField(
controller: _word,
textAlign: TextAlign.center,
decoration: InputDecoration(
suffixIcon: IconButton(
color: Colors.green,
icon: Icon(Icons.close),
onPressed: () {
_word.text = '';
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
filled: true,
fillColor: Colors.yellow[50],
hintStyle: TextStyle(color: Colors.green),
hintText: 'Enter a word',
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 65, height: 65),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(
CircleBorder())),
child: Icon(Icons.search),
onPressed: () async {
detectNetStatus(context);
String word = _word.text;
_word.text = '';
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return word == '' ? RandomResults() : Results(word);
}));
}),
),
),
],
),
),
);
},
),
);
}

How to Scroll multiple Textfields together in Flutter

I have a situation where 2 Textfields are placed inside a Stack Widget overlapping one another. Is there anyway i can scroll both the textfields together vertically if the data exceeds the size of the screen?
Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(15, 8, 0, 0),
child: SyntaxView(
code: codeController.text,
syntax: Syntax.C,
syntaxTheme: SyntaxTheme.gravityDark(),
withZoom: true,
withLinesCount: true),
),
Container(
width: 362,
padding: EdgeInsets.fromLTRB(55, 12, 0, 0),
child: TextFormField(
scrollPhysics: NeverScrollableScrollPhysics(),
focusNode: codeFocus,
controller: codeController,
autofocus: true,
keyboardType: TextInputType.multiline,
maxLines: null,
style: TextStyle(
color: Color(0x00ffffff),
// color: Colors.yellow,
height: 1.35,
fontFamily: "CodeFont",
fontSize: 12,
),
decoration: InputDecoration(
border: InputBorder.none,
),
onChanged: (value) {
setState(() {
CODE = value;
// print("X : ${codeController.text}");
});
},
),
),
],
),

A simple way way to handle that situation is to wrap your content in a ListView, which handles scrolling of its children. Here's a snippet from the ListView docs as an example:
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
https://api.flutter.dev/flutter/widgets/ListView-class.html

space between divider and container in flutter

The divider is not adjusting as I need, All the stuff inside in Column Widget and not able to set vertical line.
Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child:
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(child: TextFormField(
style: new TextStyle(color: Colors.grey),
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: Icon(Icons.search,color: Colors.grey,size: 30.0,),
hintStyle: TextStyle(color: Colors.grey,fontSize: 18.0),
hintText: 'Search',
),),),
IconButton(onPressed:(){},icon: Image.asset('assets/images/grid.png',fit: BoxFit.contain ,),),
Container(decoration: BoxDecoration(color: Colors.grey),width: 5.0,child: Text(''),),
IconButton(onPressed:(){},icon: Image.asset('assets/images/list.png',fit: BoxFit.contain ,),),
],
)),
Divider(color: Colors.grey,),
I need this
and getting this

Just give a height of 1 to the divider.
Divider(height: 1)
This will remove any padding it has.
Simple solution : Works Flawlessly 🎊🚀
Full code below :
ListView.separated(
itemCount: 10,
separatorBuilder: (_ , __ ) => Divider(height:1),
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('item $index'),
);
},
);

Just remove divider replace with this line
Container(color: Colors.grey, height: 1)
and set Column
crossAxisAlignment: CrossAxisAlignment.stretch,

Yeah the Divider will always have padding so I just recreated what you wanted using BoxDecorations instead:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Material(
child: Column(children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: TextFormField(
style: new TextStyle(color: Colors.grey),
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
color: Colors.grey,
size: 30.0,
),
hintStyle: TextStyle(color: Colors.grey, fontSize: 18.0),
hintText: 'Search',
),
),
),
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
],
)),
])),
);
}
Edit: reuploaded pic for clarity and removed width of borders so stays as default 1.0.

The appropriate padding is automatically computed from the height. So, setting height of divider to 0 will remove the padding.