Develop Reference

How to make validation stepper when form inside bottomsheet?

This app make a stepper. In stepper I build add data and show bottomsheet. In bottomsheet we can add data from there, but in this case how to validate stepper when we click next steps read method bottomsheet (if user not filling field showing error in stepper).
This is the method bottomsheet:
class StepperclassState extends State<Stepperclass> {
void inputRekomen(){
final Formlist formProvider = Provider.of<Formlist>(context, listen: false);
showModalBottomSheet(
//isScrollControlled: true,
context: context,
backgroundColor: Colors.white,
shape : RoundedRectangleBorder(
borderRadius : BorderRadius.vertical( top: Radius.circular(30),)
),
builder: (context) => DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) => SingleChildScrollView(
controller: scrollController,
child: StatefulBuilder(
builder: (BuildContext context, StateSetter stateSetter) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: Color(0xffFFFFF),
),
child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: white),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 15, left: 145),
child: Container(
width: 80, height: 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(top: 30, right: 10, left: 10, bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Color(0xffDCE9F3),
borderRadius: BorderRadius.circular(30),),
child: Form(
key: formKey3,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20,),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Apa tindakan rekomendasi untuk mencegah kejadian berulang ?', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
SizedBox(height: 30,),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Rekomendasi', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10, bottom: 20.0, left: 20, right: 20),
child: Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context, errorText: FormBuilderLocalizations.of(context).requiredErrorText),
FormBuilderValidators.minLength(context, 3, errorText: FormBuilderLocalizations.of(context).minLengthErrorText(3)),
FormBuilderValidators.email(context, errorText: FormBuilderLocalizations.of(context).emailErrorText ),
]),
textAlign: TextAlign.start,
decoration: InputDecoration(
fillColor: Color(0xfffaebeb),
filled: inputteks,
contentPadding: EdgeInsets.all(12),
border: InputBorder.none,
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0) ),
),
focusedErrorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0), width: 1),
),
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black, width: 1),
),
errorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xffE64646) ),
),
disabledBorder: InputBorder.none,),
autofocus: false,
controller: rekomen,
onChanged: (String value) {
formProvider.tanggaltext(value);
rekomen.selection = TextSelection.fromPosition(TextPosition(offset: rekomen.text.length));
},
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Penjelasan', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10, bottom: 20.0, left: 20, right: 20),
child: Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context, errorText: FormBuilderLocalizations.of(context).requiredErrorText),
FormBuilderValidators.minLength(context, 3, errorText: FormBuilderLocalizations.of(context).minLengthErrorText(3)),
FormBuilderValidators.email(context, errorText: FormBuilderLocalizations.of(context).emailErrorText ),
]),
textAlign: TextAlign.start,
decoration: InputDecoration(
fillColor: Color(0xfffaebeb),
filled: inputteks,
contentPadding: EdgeInsets.all(12),
border: InputBorder.none,
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0) ),
),
focusedErrorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0), width: 1),
),
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black, width: 1),
),
errorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xffE64646) ),
),
disabledBorder: InputBorder.none,),
autofocus: false,
controller: penjelasan,
onChanged: (String value) {
formProvider.tanggaltext(value);
penjelasan.selection = TextSelection.fromPosition(TextPosition(offset: penjelasan.text.length));
},
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Penanggung Jawab Tindakan Rekomendasi:', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
SizedBox(height: 5,),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Container(
width: 280,
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 5),
),
),
),
Column(
children: [
SizedBox(height: 5,),
Padding(
padding: const EdgeInsets.only(top: 10, right: 25, left: 25),
child: Container(
width: 315,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.black),
),
constraints: BoxConstraints(
minHeight: 45,
minWidth: 315,
),
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),
child: GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},
child: chosenValue == -1 ? Text(
'Penanggung Jawab'
) : Text(
'${penanggung[chosenValue]}'
),
)
),),
GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},
child: Icon
(
showdropdown ?
Icons.arrow_drop_up_rounded : Icons.arrow_drop_down_rounded,
),
),
],
),
),
),
Visibility(
visible: showdropdown,
child: Stack(
children: [
Container(
height: 100,
width: 290,
decoration: BoxDecoration(
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.only(left: 5),
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: penanggung.length,
itemBuilder: (BuildContext context, int position) {
return InkWell(
onTap: () {
stateSetter(() {
chosenValue = position;
if ( position == 2){
showTextField1 = true;
showdropdown = false;
buttonshow = false;
}
else{
showTextField1 = false;
showdropdown = false;
buttonshow = true;
}
});
},
child: Container(
width: 150,
child: Container(
decoration: (chosenValue==position)
? BoxDecoration(
border: Border.all(color: Colors.green))
: null,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 5,),
Text(penanggung[position], textAlign: TextAlign.left, ),
SizedBox(height: 5,),
],
),
),
),
);
},
),
),
),
],
),
),
],
),
Visibility(
visible: buttonshow,
child: Padding(
padding: const EdgeInsets.only(top: 10, left: 24),
child: Container(
height: 44,
child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },
color: Color(0xff4986CC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
child: Text(
'Simpan', style: putihstyle.copyWith(
fontSize: 14,
),
),
),
),
),
),
Center(
child: Column(
children: [
Opacity(opacity: loading ? 1.0 : 0,
child: CircularProgressIndicator(),)
],
),
),
Visibility(
visible: showTextField1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10, left: 24),
child: Container(
height: 40,
child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },
color: Color(0xff4986CC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
child: Text(
'Simpan', style: putihstyle.copyWith(
fontSize: 14,
),
),
),
),
),
],
),
),
],
),
),
), ),
],
),
),
],
),
);
}
),
),
),
);
}
}
this is my stepper
#override
Widget build(BuildContext context) {
CoolStep(
title: 'Identitas',
subtitle: 'Isi Identitas Saksi/korban',
alignment: Alignment.topCenter,
content: Stack(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Container(
width: 461,
height: 350,
decoration: BoxDecoration(
color: Color(0xffDCE9F3),
borderRadius: BorderRadius.circular(23),),
child: Padding(
padding: const EdgeInsets.all( 20),
child: Column(
children: [
Container(
width: 221,
height: 146,
),
],
),
),
),
),
Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 320, left: 250),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(onPressed: () => setState(() {
inputRekomen();
}),
tooltip: 'Tambahkan',
child: Icon(Icons.add,),
backgroundColor: Color(0xff5D99C5),
),
],
),
),
],
),
], ),
validation: () {
return null;
},
),

I am not sure if this can help solve the problem, since the problem is not clear enough.
First, you need to wrap all if the steps form in Form, Set the key from the class property. for example:
final _formKey = GlobalKey<FormState>();
then on build method, on the Form widget set the key:
child: Form(
key: _formKey,
...
and then on each TextFormField, put validator on it for example:
validator: (value) {
if (value!.isEmpty) {
return 'Name is required';
}
return null;
}
then, when you need validation/checking on another methods in bottomsheet just call these function:
if (!_formKey.currentState!.validate()) {
return 'Fill form correctly';
}

Container text and icons alignment- need to align this icon to right of this container

I need to make this favourite icon to the right of the container. I can use padding but is it ok? I mean is it going to work with all devices. Is there any solid way to align these 3 containers? I made a list view because I am adding more stuff like this one. can you guys help me with this?
Here is the image
Here is my code
class _OrdersState extends State<Orders> {
#override
Widget build(BuildContext context) {
return Material(
child: SafeArea(
child: Stack(
children: [
Background(),
Positioned(
top: 10,
left: 5,
child: SizedBox(
// width: 10,
// height: 10,
child: Container(
color: Colors.transparent,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
//go back
onPressed: () => Navigator.of(context).pop(),
),
),
),
),
Positioned(
top: 90,
left: 22,
right: 22,
child: SizedBox(
width: 350,
height: 900,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
),
],
),
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
),
),
),
),
],
),
),
);
}
}

In the Row try to use and Expanded widget like this
Row(
children: [
Expanded(
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
],
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
)

Flutter:ListView inside ListView.builder

I am trying to bring a List of containers and i want to change the details inside this list of containers using fire store. But when i am running the program the page is showing blank. The output i want is like this image,
The output i am getting. And my second question is how to add images to the field inside the firestore.
Thanks in advance, it is really hard to publish a question in stack overflow.
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//1st box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_1']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_1']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_1_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_1_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
)),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_1']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
//2nd box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_2']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_2']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_2_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_2_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
),
),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_2']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),

I don't think you need the second listview, but if you do, try this:
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
//1st box
...

Using Stack to align Containers in Flutter

I want the Search (TextFormField) bar to look like this and the background image to curve in the container:
This is the Code, I tried to Stack the Container and Search Bar together and then Align the search bar using Positioned, but couldn't do it.
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
alignment: Alignment.topCenter,
color:Colors.blueAccent,
height:250.0,
/*decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15.0))
),*/
//child: Image.asset("assets/bgImage.jpg"),
),
Positioned(
top: 155.0,
right: 0.0,
left: 0.0,
child: Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
/*suffixIcon: IconButton(
icon: Icon(
Icons.clear,
),
onPressed: _clearSearch,
),*/
filled: true,
),
//onSubmitted :
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20.0,),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
),
I tried to cover all of them in the single Stack but they stacked over each other and I couldn't arrange them one after another vertically.

I've made changes to your code to do what you are trying to achieve. Please take a look:
SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
alignment: Alignment.topCenter,
height:250.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.elliptical(30,8),
bottomRight: Radius.elliptical(30,8),
),
color:Colors.blueAccent,
),
//child: Image.asset("assets/bgImage.jpg"),
),
Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.only(top: 223, left: 55, right: 55),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
filled: true,
),
//onSubmitted :
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20.0, top: 20),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
);

This should work for you
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 30.0),
alignment: Alignment.topCenter,
height:250.0,
decoration: BoxDecoration(
color:Colors.blueAccent,
borderRadius: BorderRadius.only(
bottomLeft: Radius.elliptical(25, 10),
bottomRight: Radius.elliptical(25, 10),
)
),
//child: Image.asset("assets/bgImage.jpg"),
),
Positioned(
top: 200.0,
right: 0.0,
left: 0.0,
child: Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
/*suffixIcon: IconButton(
icon: Icon(
Icons.clear,
),
onPressed: _clearSearch,
),*/
filled: true,
),
//onSubmitted :
),
),
),
],
),
Padding(
padding: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0,
bottom: 20.0,
),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
),
);
}

Bottom overloaded by 213 pixels in flutter

Hi I am trying to create login screen. It is working fine for me. When I open the keyboard then it is giving me an error Bottom overloaded by 213 pixels.
Widget LoginPage() {
return new Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.05), BlendMode.dstATop),
image: AssetImage('assets/images/mountains.jpg'),
fit: BoxFit.cover,
),
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal#live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: new FlatButton(
child: new Text(
"Forgot Password?",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
textAlign: TextAlign.end,
),
onPressed: () => {},
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => {},
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
Text(
"OR CONNECT WITH",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(border: Border.all(width: 0.25)),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
margin: EdgeInsets.only(right: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xff3B5998),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea90,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"FACEBOOK",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
new Expanded(
child: new Container(
margin: EdgeInsets.only(left: 8.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Color(0Xffdb3236),
onPressed: () => {},
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
const IconData(0xea88,
fontFamily: 'icomoon'),
color: Colors.white,
size: 15.0,
),
Text(
"GOOGLE",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
),
],
),
),
),
],
),
)
],
),
));
}
Does anyone know what could be the issue ?

I would suggest replacing the top Column widget with a ListView, that automatically resizes on keyboard input, whilst also supporting scrolling.
If you really want this setup as it is, you can edit your Scaffold with the parameter
resizeToAvoidBottomPadding: false
That should make the error disappear

Scaffold(
resizeToAvoidBottomInset: false, // set it to false
...
)
As Andrey said, you may have issues with scrolling, so you may try
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
body: SingleChildScrollView(child: YourBody()),
)

With resizeToAvoidBottomPadding: false in Scaffold, You don't see all the widgets that are below the open textfield. The solution is to insert a container with a SingleChildScrollView inside. Example:
Container(
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
color: viewModel.color,
child: SingleChildScrollView(child:"Your widgets"));

you usually need to provide a scroll widget on top of your widgets because if you try to open the keyboard or change the orientation of your phone, flutter needs to know how to handle the distribution of the widgets on the screen.
Please review this resource, you can check the different options that flutter provide Out of the box, and choose the best option for your scenario.
https://flutter.io/widgets/scrolling/

wrap your child view into ListView will solve the prob. Please check this
class _LoginScreenState extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new Text("jk", style: TextStyle(fontFamily: "mono_bold")),
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(),
decoration: InputDecoration(
labelText: "Email",
contentPadding: EdgeInsets.all(8.0)
),
keyboardType: TextInputType.emailAddress,
)
),
new Padding(
padding: EdgeInsets.only(left: 1,top: 50,right: 1,bottom: 1),
child: new TextField(
style: new TextStyle(
),
decoration: InputDecoration(
labelText: "Password"
),
keyboardType: TextInputType.text,
obscureText: true,
),
),
],
),
),
],
)
),
);
}

wrap your column into SingleChildScrollView will solve the problem. Please check this:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(),
TextField(),
],
),
))));
}
And You also use for removing yellow black overflow line
resizeToAvoidBottomPadding: false
but in this case, TextField does not move up on click time.

wrap with SingleChildScrollView Widget here's my code to solve this situation:
it is best and easiest method
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Hero(
tag: 'logo',
child: Container(
height: 200.0,
child: Image.asset('images/logo.png'),
),
),
SizedBox(
height: 48.0,
),
TextField(
onChanged: (value) {
//Do something with the user input.
},
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter username'),
),
SizedBox(
height: 8.0,
),
TextField(
onChanged: (value) {
//Do something with the user input.
},
decoration: kTextFieldDecoration.copyWith(hintText: 'Enter password'),
),
SizedBox(
height: 24.0,
),
RoundedButton(
colour: Colors.blueAccent,
text: 'Register',
onPressed: () {
//later todo
},
),
],
),
),

You can set resizeToAvoidBottomInset: false for avoiding overflow, but you can't reach fields in bottom of page, which can be covered by keyboard.
Or you can wrap body of Scaffold inside SingleChildScrollView

You can enclose all the widgets within the ListView.
So you can scroll it and the overloaded will disappear.

you should add resizeToAvoidBottomInset: false, and put your button in child:SingleChildScrollView() like the following code below :
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: PreferredSize(
preferredSize:const Size(double.infinity,100),
child:(ResponsiveLayout.isTinyLimit(context) ||
ResponsiveLayout.isTinyHeightLimit(context))
? Container()
: const AppBarWidget(),
),
body: Center(
child:SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center ,
children: [
Text("Temperature"),
LineChartSample2(),
Text("Gas Level"),
LineChartSample2(),
on?Icon(Icons.lightbulb,
size:100,
color: Colors.lightBlue.shade700 ,
):const Icon(Icons.lightbulb_outline,
size:100,
),
ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: on? Colors.green: Colors.white10),
onPressed: (){
dbR.child("movement").set({"Switch":!on});
setState(() {
on = !on;
});
},
child:on ? const Text("On"):const Text("Off"))
],
),
),
) ),
),
);

Put your content in to SingleChildScrollView and add a ConstrainedBox and try
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Wrap your top column inside SingleChildScrollView.
Make you layout scrollable.

You can wrap your Fields in single child ScrollView of Flutter.

This align items bottom to top,
Try this..
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
reverse: true,

Remove unwanted padding top and bottom
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
top: size.width * 0.15,
bottom: size.width * 0.15,
),
to change by this
child: Container(
height: size.height,
width: size.width,
padding: EdgeInsets.only(
left: size.width * 0.15,
right: size.width * 0.15,
),
This worked for me.

please set resizeToAvoidBottomPadding: false and set scrollPadding in textField

Instead of column widget try to use flex widget, which might solve your problem.

Try wrapping your main Column with
1.(ListView and give property shrinkWrap: true,) List view has property children: [], or
2.( SingleChildScrollView() )but it has only child: , .
Something like:
child: ListView(shrinkWrap: true, children: <Widget>[
new Column(children: <Widget>[
Container(
padding: EdgeInsets.all(120.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'samarthagarwal#live.com',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
])
]),