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.
Related
I am trying to wrap my column widget in a single child scroll view since I am getting overflow. But when I am trying to wrap it, I am receiving errors such as
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
RenderBox was not laid out: RenderFlex#dc736 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'
What can I do to prevent overflow of pixels in my app ? Here is my code:
return Scaffold(
appBar: AppBar(
title: Text('Edit your pet`s details'),
backgroundColor: Color.fromRGBO(101, 69, 112, 1.0),
),
body: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget> [
Row(
children: <Widget>[
Expanded(
child: TextFieldWidget(
controller: _petNameController,
helperText: "Pet's Name",
)),
],
),
Padding(
padding: const EdgeInsets.only(left: 50.0, right: 50.0),
child: Divider(
color: Colors.grey,
thickness: 0.5,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 60.0,),
Text(
"$_petName is a $_petGender. Update gender",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w400,
),
)
],
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
primary: false,
scrollDirection: Axis.vertical,
children: List.generate(petGenders.length, (index) {
return GestureDetector(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0)),
color:
selectedIndex == index ? primaryColor : null,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
petGenders[petKeys[index]],
SizedBox(
height: 15.0,
),
Text(
petKeys[index],
style: TextStyle(
color: selectedIndex == index
? Colors.white
: null,
fontSize: 18.0,
fontWeight: FontWeight.w600),
),
],
),
),
),
onTap: () {
setState(() {
widget.pet.gender = petKeys[index];
selectedIndex = index;
});
});
}),
),
),
The error comes from the fact that your Column contains an Extended widget, which forces to use the maximum vertical space.
The SingleScrollChildView has no limit to vertical space it can use.
The result is that you have a widget that try to take an infinite vertical space.
How can you fix that ?
Either, remove the Extended widget, or the SingleScrollChildView widget.
Or, you can also wrap your Extended widget with another widget with a defined size or constraints like a Container with the properties height and width.
I am getting Error Incorrect use of ParentDataWidget.
And the lists not show the item in first time.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {},
)
],
backgroundColor: Colors.green,
),
drawer: Drawer(
child: AppDrawer(),
),
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
child: HomeSlider(),
),
Padding(
padding: EdgeInsets.only(top: 14.0, left: 8.0, right: 8.0),
child: Text(
AppLocalizations.of(context)
.translate('leatest_producrs'),
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) => Card(
child: InkWell(
child: Column(
children: [
Flexible(
child: Container(
height: double.infinity,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
Container(
width: 150,
padding: EdgeInsets.all(10),
child: Text(cards[index].productName,
style: new TextStyle(fontSize: 12),
softWrap: true),
),
],
),
onTap: () {
Fluttertoast.showToast(
msg: cards[index].productName,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.white70,
textColor: Colors.black,
fontSize: 16.0);
},
),
),
),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(top: 6.0, left: 8.0, right: 8.0),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-1.jpg'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Text('Featured Products',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Padding(
padding: const EdgeInsets.only(
right: 8.0, top: 8.0, left: 8.0),
child: RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('View All',
style: TextStyle(color: Colors.white)),
onPressed: () {
Navigator.pushNamed(context, '/categorise');
}),
)
],
),
Container(
child: GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
padding:
EdgeInsets.only(top: 8, left: 6, right: 6, bottom: 12),
children: List.generate(cards.length, (index) {
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () {
print('Card tapped.');
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
ListTile(
title: Text(
cards[index].productName,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12),
)),
],
),
),
),
);
}),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(
top: 6.0, left: 8.0, right: 8.0, bottom: 10),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-2.jpg'),
),
),
)
],
),
),
));
Error Codes are
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ←
Scrollable ← ListView ← Expanded ← ConstrainedBox ← Padding ← Container ← Column ← ⋯
When the exception was thrown, this was the stack:
.
.
.
.
(elided 4 frames from class _RawReceivePortImpl, class _Timer, and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ← Scrollable ← ListView ← Expanded ← ConstrainedBox ← Padding ← Container ← Column ← ⋯
When the exception was thrown, this was the stack:
#0 RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5689:11)
#1 RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5705:6)
#2 ParentDataElement._applyParentData.applyParentDataToChild (package:flutter/src/widgets/framework.dart:4939:15)
#3 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4600:14)
#4 ParentDataElement._applyParentData.applyParentDataToChild (package:flutter/src/widgets/framework.dart:4942:15)
...
════════════════════════════════════════════════════════════════════════════════════════════════════
You can copy paste run full code below
In your case, you do not need Expanded because you already set Container height to 200
code snippet
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: ListView.builder(
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class CardItem {
String productImg;
String productName;
CardItem({this.productImg, this.productName});
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
List<CardItem> cards = [
CardItem(productImg: "https://picsum.photos/250?image=9", productName: "a"),
CardItem(
productImg: "https://picsum.photos/250?image=10", productName: "b"),
CardItem(
productImg: "https://picsum.photos/250?image=11", productName: "c"),
CardItem(
productImg: "https://picsum.photos/250?image=12", productName: "d"),
CardItem(
productImg: "https://picsum.photos/250?image=13", productName: "e"),
CardItem(
productImg: "https://picsum.photos/250?image=14", productName: "f"),
CardItem(
productImg: "https://picsum.photos/250?image=15", productName: "g"),
CardItem(
productImg: "https://picsum.photos/250?image=16", productName: "h")
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {},
)
],
backgroundColor: Colors.green,
),
/* drawer: Drawer(
child: AppDrawer(),
),*/
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
child: Text("HomeSlider()"),
),
Padding(
padding: EdgeInsets.only(top: 14.0, left: 8.0, right: 8.0),
child: Text(
'leatest_producrs',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) => Card(
child: InkWell(
child: Column(
children: [
Flexible(
child: Container(
height: double.infinity,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
Container(
width: 150,
padding: EdgeInsets.all(10),
child: Text(cards[index].productName,
style: new TextStyle(fontSize: 12),
softWrap: true),
),
],
),
onTap: () {
},
),
),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(top: 6.0, left: 8.0, right: 8.0),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-1.jpg'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Text('Featured Products',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Padding(
padding: const EdgeInsets.only(
right: 8.0, top: 8.0, left: 8.0),
child: RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('View All',
style: TextStyle(color: Colors.white)),
onPressed: () {
Navigator.pushNamed(context, '/categorise');
}),
)
],
),
Container(
child: GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
padding:
EdgeInsets.only(top: 8, left: 6, right: 6, bottom: 12),
children: List.generate(cards.length, (index) {
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () {
print('Card tapped.');
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
ListTile(
title: Text(
cards[index].productName,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12),
)),
],
),
),
),
);
}),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(
top: 6.0, left: 8.0, right: 8.0, bottom: 10),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-2.jpg'),
),
),
)
],
),
),
)
);
}
}
The Expanded widget has to be a direct child of a Column, Row or Flex. You have it wrapped in a Container. Try to swap the Container and Expanded widgets.
enter image description here
The relevant error-causing widget was:
Column file:///F:/App/Market/1.7/flutter_application/lib/src/pages/cart.dart:71:21
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#22d62 relayoutBoundary=up3 OVERFLOWING
... needs compositing
... parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=403.4)
... size: Size(411.4, 403.4)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
body: RefreshIndicator(
onRefresh: _con.refreshCarts,
child: _con.carts.isEmpty
? EmptyCartWidget()
: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: [
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, right: 10),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0),
leading: Icon(
Icons.shopping_cart,
color: Theme.of(context).hintColor,
),
title: Text(
S.of(context).shopping_cart,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headline4,
),
subtitle: Text(
S
.of(context)
.verify_your_quantity_and_click_checkout,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.caption,
),
),
),
ListView.separated(
padding: EdgeInsets.symmetric(vertical: 15),
scrollDirection: Axis.vertical,
shrinkWrap: true,
primary: true,
itemCount: _con.carts.length,
separatorBuilder: (context, index) {
return SizedBox(height: 15);
},
itemBuilder: (context, index) {
return CartItemWidget(
cart: _con.carts.elementAt(index),
heroTag: 'cart',
increment: () {
_con.incrementQuantity(
_con.carts.elementAt(index));
},
decrement: () {
_con.decrementQuantity(
_con.carts.elementAt(index));
},
onDismissed: () {
_con.removeFromCart(
_con.carts.elementAt(index));
},
);
},
),
],
),
Container(
padding: const EdgeInsets.all(18),
margin: EdgeInsets.only(bottom: 15),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Theme.of(context)
.focusColor
.withOpacity(0.15),
offset: Offset(0, 2),
blurRadius: 5.0)
]),
child: TextField(
keyboardType: TextInputType.text,
onSubmitted: (String value) {
_con.doApplyCoupon(value);
},
cursorColor: Theme.of(context).accentColor,
controller: TextEditingController()
..text = coupon?.code ?? '',
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal: 20, vertical: 15),
floatingLabelBehavior: FloatingLabelBehavior.always,
hintStyle: Theme.of(context).textTheme.bodyText1,
suffixText: coupon?.valid == null
? ''
: (coupon.valid
? S.of(context).validCouponCode
: S.of(context).invalidCouponCode),
suffixStyle: Theme.of(context)
.textTheme
.caption
.merge(
TextStyle(color: _con.getCouponIconColor())),
suffixIcon: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Icon(
Icons.confirmation_number,
color: _con.getCouponIconColor(),
size: 28,
),
),
hintText: S.of(context).haveCouponCode,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Theme.of(context)
.focusColor
.withOpacity(0.2))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Theme.of(context)
.focusColor
.withOpacity(0.5))),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Theme.of(context)
.focusColor
.withOpacity(0.2))),
),
),
),
],
),
),
Wrap your column childrens with Expanded widget like this .
Column(
children: <Widget>[
Expanded(
child :
Padding(
padding: const EdgeInsets.only(left: 20, right: 10),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 0),
leading: Icon(
Icons.shopping_cart,
color: Theme.of(context).hintColor,
),
title: Text(
S.of(context).shopping_cart,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headline4,
),
subtitle: Text(
S
.of(context)
.verify_your_quantity_and_click_checkout,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.caption,
),
),
)),
Expanded(
child :
ListView.separated(
padding: EdgeInsets.symmetric(vertical: 15),
scrollDirection: Axis.vertical,
shrinkWrap: true,
primary: true,
itemCount: _con.carts.length,
separatorBuilder: (context, index) {
return SizedBox(height: 15);
},
itemBuilder: (context, index) {
return CartItemWidget(
cart: _con.carts.elementAt(index),
heroTag: 'cart',
increment: () {
_con.incrementQuantity(
_con.carts.elementAt(index));
},
decrement: () {
_con.decrementQuantity(
_con.carts.elementAt(index));
},
onDismissed: () {
_con.removeFromCart(
_con.carts.elementAt(index));
},
);
},
)),
],
)
enter image description here
The issue has been resolved, but another problem has appeared
There is an empty space that I can no longer press
I have a column inside a single child scroll view. I need to make my login screen scroll when I type using the keyboard because the keyboard hides the password text field.
class UserRegistration extends StatefulWidget {
#override
_UserRegistrationState createState() => _UserRegistrationState();
}
class _UserRegistrationState extends State<UserRegistration> {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Color(0xFF6C62FF)
));
return SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
backgroundColor: Color(0xFF6C62FF),
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Column([![enter image description here][1]][1]
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(child: FittedBox(child: Text('Welcome', style: TextStyle(fontFamily: 'SourceSans', fontSize: 50, fontWeight: FontWeight.w600, color: Color(0xFFFFD700)),))),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Register', style: TextStyle(fontFamily: 'SourceSans', fontSize: 40, fontWeight: FontWeight.w600, color: Colors.white)),
SizedBox(height: 5,),
Text('Start from today', style: TextStyle(fontFamily: 'SourceSans', fontSize: 25, letterSpacing: 1.5,fontWeight: FontWeight.w600, color: Colors.white), overflow: TextOverflow.ellipsis,),
],
),
),
Form(
child: Column(
children: [
EditTextNormal(hintText: 'Email', iconData: Icons.email, textInputType: TextInputType.emailAddress, validate: false, errorText: 'Enter your email',),
SizedBox(height: 20,),
EditTextObscure(hintText: 'Password', iconData: Icons.lock, textInputType: TextInputType.text, validate: false, errorText: 'Enter your password',),
SizedBox(height: 50,),
Container(
height: 50,
width: 180,
child: FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
onPressed: () {},
color: Colors.white,
child: Text('Register', style: TextStyle(color: Color(0xFF6C62FF), fontSize: 20), overflow: TextOverflow.ellipsis,),
),
)
],
),
),
Center(
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Login', style: TextStyle(color: Color(0xFFFFD700), letterSpacing: 1, wordSpacing: 1.5))
],
text: 'Have an account? ',
style: TextStyle(fontSize: 18, fontFamily: 'SourceSans', fontWeight: FontWeight.bold, letterSpacing: 1, wordSpacing: 1.5)
),
),
),
],
),
),
),
),
);
}
}
This is my code but here when I use a column inside a single child scroll view space evenly does not work. Please give me a solution.
My output:
Expected Output:
Try This
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// CONTENT HERE
],
),
),
),
),
);
}
Add Container inside SingleChildScrollView and assign it height based on your keyboard open or not.
Add Dependency:
dependencies:
keyboard_visibility: ^0.5.6
Initialize keyboard listener in initState() for callback
bool _isKeyBoardShown = false;
#protected
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
setState(() {
_isKeyBoardShown = visible;
});
},
);
}
Based on _isKeyBoardShown value decide whether to add additional height on the screen or not.
Container(
width: MediaQuery.of(context).size.width,
height: _isKeyBoardShown
? MediaQuery.of(context).size.height +
MediaQuery.of(context).size.height / 2
: MediaQuery.of(context).size.height,
child: Column(....)
)
Note: Use MediaQuery to decide additional height don't use hard-coded values
here I used MediaQuery.of(context).size.height / 2
my app no longer works, this works yesterday but no matter what I try to debug this even when I didnt change anything and just hot reloads, the Unimplemented error appears.
It works well yesterday. The error on my projects are posted below. it says with a Column widget but I dont know where since it works well yesterday.
IT should start with the LoginScreen and not directly to homescreen, for some reason when I tried my github clone of the app that Im making,it go straight to homescreen and not login screen first.
Also, I didnt do any changes to my homescreen but on the login.dart, register.dart only since yesterday, the firebase authentication works and the app proceeds to the homescreen
Ive added the images of the errors
you can try to clone my project https://github.com/rolandopeda/syncshop
ERROR
I/flutter ( 7581): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 7581): The following assertion was thrown during layout:
I/flutter ( 7581): A RenderFlex overflowed by 2.0 pixels on the bottom.
I/flutter ( 7581):
I/flutter ( 7581): The relevant error-causing widget was:
I/flutter ( 7581): Column
lib\login\login.dart:129
I/flutter ( 7581):
I/flutter ( 7581): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 7581): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 7581): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 7581): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 7581): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 7581): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 7581): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 7581): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 7581): like a ListView.
I/flutter ( 7581): The specific RenderFlex in question is: RenderFlex#7e604 relayoutBoundary=up9 OVERFLOWING:
I/flutter ( 7581): creator: Column ← ConstrainedBox ← Container ← _PointerListener ← Listener ← _GestureSemantics ←
I/flutter ( 7581): RawGestureDetector ← GestureDetector ← MouseRegion ← Semantics ← _FocusMarker ← Focus ← ⋯
I/flutter ( 7581): parentData: <none> (can use size)
I/flutter ( 7581): constraints: BoxConstraints(0.0<=w<=331.4, h=12.0)
I/flutter ( 7581): size: Size(96.0, 12.0)
I/flutter ( 7581): direction: vertical
I/flutter ( 7581): mainAxisAlignment: start
I/flutter ( 7581): mainAxisSize: max
I/flutter ( 7581): crossAxisAlignment: center
I/flutter ( 7581): verticalDirection: down
I/flutter ( 7581): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 7581): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 7581): Another exception was thrown: A RenderFlex overflowed by 164 pixels on the bottom.
════════ Exception caught by widgets library ═══════════════════════════════════
The following _CompileTimeError was thrown building MyApp(dirty):
Unimplemented handling of missing static target
The relevant error-causing widget was
MyApp
main.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/login/register.dart';
import 'package:vmembershipofficial/screens/home_screen.dart';
import 'login/login.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget _getScreenId() {
return StreamBuilder<FirebaseUser>(
stream: FirebaseAuth.instance.onAuthStateChanged, //check if we are login
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
return HomeScreen();
} else {
return LoginPage();
}
},
);
}
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: _getScreenId(),
debugShowCheckedModeBanner: false,
routes: {
HomeScreen.id: (context) => HomeScreen(),
RegisterPage.id: (context) => RegisterPage(),
},
);
}
}
login
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/login/register.dart';
class LoginPage extends StatefulWidget {
LoginPage({Key key}) : super(key: key);
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Color(0xff0D192A),
body: Container(
child: ListView(children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: Container(
width: 120,
height: 120,
margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
child: Image(
image: AssetImage("assets/images/vlogo.png"),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Container(
margin: EdgeInsets.all(5.0),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
),
),
//TEXTFIELDS //
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.5,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter Your Email",
hintStyle: TextStyle(color: Colors.grey[400]),
)),
),
),
),
SizedBox(height: 20.0),
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter Your Password",
hintStyle: TextStyle(color: Colors.grey[400]),
)),
),
),
),
SizedBox(height: 50),
InkWell(
onTap: () {
setState(() {});
},
child: Container(
height: 50,
decoration: BoxDecoration(
color: Color.fromRGBO(211, 184, 117, 100)),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
),
),
SizedBox(height: 40),
Container(
height: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Don't have an account?",
style: TextStyle(color: Colors.white, fontSize: 12.0),
),
SizedBox(width: 12.0),
InkWell(
onTap: () {
setState(
() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegisterPage()),
);
},
);
},
child: Text(
"Register Here",
style: TextStyle(
color: Color.fromRGBO(211, 184, 117, 100),
fontSize: 12.0),
),
)
],
),
),
SizedBox(height: 10),
InkWell(
onTap: () {
setState(() {});
},
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Text(
"Forgot password?",
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
],
)),
),
],
),
),
]),
),
),
);
}
}
homescreen
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:vmembershipofficial/Widgets/afterintroducing.dart';
import 'package:vmembershipofficial/Widgets/discount_carousel.dart';
import 'package:vmembershipofficial/Widgets/header_carousel.dart';
import 'package:vmembershipofficial/Widgets/introducing_vmembership.dart';
class HomeScreen extends StatefulWidget {
static final String id = 'home_screen';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _currentTab = 0;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text("Explore V!", style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
),
SizedBox(height:5.0),
HeaderCarousel(),
SizedBox(height: 30.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text("Discount", style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 5.0),
child: Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", style: TextStyle(fontSize: 12.0),),
),
DiscountCarousel(),
SizedBox(height: 30.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text(
"Introducing V Membership Plus", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
child: Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", style: TextStyle(fontSize: 12.0),),
),
VmembershipPlus(),
SizedBox(height: 30.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
child: Text(
"Lorem Ipsum", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 4.0),
child: Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.", style: TextStyle(fontSize: 12.0),),
),
SizedBox(height: 10.0,),
AfterIntroducing(),
SizedBox(height: 10.0,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: FlatButton(
padding: EdgeInsets.all(15.0),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
},
child: Text(
"LOREM IPSUM",
style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w600),
),
),
),
SizedBox(height: 50.0,),
],
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentTab, //makes a new variable called current Tab
onTap: (int value) {
setState(
() {
_currentTab = value;
},
);
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search, size: 30.0),
title: Text('Search', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Favorites', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text('Messages', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
// icon: CircleAvatar(
// backgroundImage: NetworkImage(
// 'https://randomuser.me/api/portraits/men/31.jpg'),
// radius: 15.0,
// ),
icon: Icon(Icons.account_circle),
title: Text('Account', style: TextStyle(fontSize: 12.0),),
),
],
),
),
);
}
}
register
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/services/auth_service.dart';
class RegisterPage extends StatefulWidget {
static final String id = 'register';
#override
_RegisterPageState createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
final _formKey = GlobalKey<FormState>();
String _name, _email, _password;
_submit() {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
AuthService.signUpUser(context, _name, _email, _password); //
}
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Color(0xff0D192A),
body: Container(
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: Container(
width: 120,
height: 120,
margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
child: Image(
image: AssetImage("assets/images/vlogo.png"),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Container(
margin: EdgeInsets.all(5.0),
child: Center(
child: Text("Register an Account",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20)),
),
),
),
Form(
key: _formKey,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("Email Address",
style: TextStyle(
fontSize: 10.0,
color: Color(0xFFD3B875),),),
],
),
],
),
),
SizedBox(height: 10.0),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
padding: EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Color(0xFFD3B875),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Email Address",
labelStyle:
TextStyle(color: Colors.black),
),
validator: (input) => !input.contains("#")
? 'Please enter a valid email'
: null,
onSaved: (input) => _email = input,
),
),
)),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("Choose Password",
style: TextStyle(
fontSize: 10.0,
color: Color(0xFFD3B875),),),
],
),
],
),
),
SizedBox(height: 10.0),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
padding: EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Color(0xFFD3B875),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Password",
labelStyle:
TextStyle(color: Colors.black),
),
validator: (input) => input.length < 8
? 'Must be at least 8 characters'
: null,
onSaved: (input) => _password = input,
obscureText: true,
),
),
)),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("Choose a Name",
style: TextStyle(
fontSize: 10.0,
color: Color(0xFFD3B875),),),
],
),
],
),
),
SizedBox(height: 10.0),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
padding: EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Color(0xFFD3B875),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Name",
labelStyle:
TextStyle(color: Colors.black),
),
validator: (input) => input.trim().isEmpty
? 'Enter a valid name'
: null,
onSaved: (input) => _name = input,
),
),
)),
SizedBox(height: 50),
Container(
width: 250.0,
child: FlatButton(
onPressed: _submit,
color: Colors.blue,
padding: EdgeInsets.all(10.0),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
),
),
),
SizedBox(height: 40),
Container(
height: 20,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Already have an account?",
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
SizedBox(width: 12.0),
InkWell(
onTap: () {
setState(() {
Navigator.pop(
context,
MaterialPageRoute(
builder: (context) =>
RegisterPage()));
});
},
child: Text(
"Login Here",
style: TextStyle(
color: Color.fromRGBO(211, 184, 117, 100),
fontSize: 12.0),
),
)
],
),
),
],
),
),
],
)
],
),
),
),
);
}
}
LOGIN SCREEN
HOT RELOAD ERROR - this occurs whether I changed something or not
I'm running your login screen code on dart pad and this is what i'm getting
your container thats holding your Email TextField is taking up 50% of the screen width and height.
I would suggest you remove the
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.5,
from your container .