Bottom oveflowed by 82 pixels in flutter

Bottom oveflowed by 82 pixels in flutter - android

I am getting bottom overflowed by 82 pixels exception in bottom of the sign up screen. tried with resizeToAvoidBottomPadding: false but it is not working. i am integrating flutter module into existing android app. calling flutter inside an activity. based on screen height it is covering Button or Text. and sometimes it is showing bottom overflowed by 7 pixels. it is changing based on screen height.
Here is the code:
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
//resizeToAvoidBottomPadding : false,
key: _scaffoldKey,
body: SingleChildScrollView(
child: SafeArea(
child: Container(
height: SizeConfig.blockSizeVertical * 100,
width: SizeConfig.blockSizeHorizontal * 100,
decoration: BoxDecoration(
color: Color(0xffF44336)
),
child:Stack(
children: <Widget>[
Hero(
tag: 'signupTag',
child: Container(
height: SizeConfig.blockSizeVertical * 30,
width: SizeConfig.blockSizeHorizontal * 100,
alignment: Alignment.center,
child: Text('Sign up', style: TextStyle(fontFamily:'Montserrat', fontSize: 50.0, color: Colors.white))
),
),
Positioned(
bottom: 0.0,
child: Container(
padding: EdgeInsets.only(top:70.0, left: 50.0, right:50.0),
height: SizeConfig.blockSizeVertical * 75,
width: SizeConfig.blockSizeHorizontal * 100,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(45.0), topRight: Radius.circular(45.0))
),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child:Text('Welcome', style:TextStyle(fontSize:30.0, fontWeight: FontWeight.bold, fontFamily: 'Montserrat', color: Color(0xff424242)),),
),
Container(
margin: EdgeInsets.only(bottom:20.0),
alignment: Alignment.centerLeft,
child:Text('Create an account to continue', style:TextStyle(fontSize:16.0, fontWeight: FontWeight.bold, fontFamily: 'Montserrat', color: Color(0xff707475)),),
),
TextField(
controller: nameController,
style: TextStyle(fontSize:17.0),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
hintText: "Full Name",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffff992b), width: 2.0)
)
),
),
SizedBox(
height: 25.0,
),
TextField(
controller: emailController,
style: TextStyle(fontSize:17.0),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
hintText: "Email",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffff992b), width: 2.0)
)
),
),
SizedBox(
height: 25.0,
),
TextField(
obscureText: true,
controller: passwordController,
style: TextStyle(fontSize:17.0),
autocorrect: false,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
hintText: "Password",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffff992b), width: 2.0)
)
),
),
SizedBox(
height: 40.0,
),
Stack(
children: <Widget>[
Positioned.fill(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
boxShadow: [
BoxShadow(
offset: Offset(0.0, 15.0),
blurRadius: 15.0,
color: Color(0xffBDBDBD),
spreadRadius: 2.0
)
]
)
)
),
Material(
// elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Color(0xffF44336),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(20.0),
onPressed: () {
signup().then((res){
if(res['status'] == 'Success'){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginPage()),
);
} else {
_displaySnackBar(context, res['comments']);
}
});
},
child: Text("CREATE",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize:15.0, letterSpacing: 1.5),
)
),
),
],
),
SizedBox(
height: 30.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Already have an account?", style:TextStyle(fontSize: 16.0)),
Hero(
tag: 'loginTag',
child:FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginPage()),
);
},
child: Text('Sign in', style:TextStyle(fontSize: 18.0, color: Color(0xffF44336)))
)
)
],
)
],
)
),
)
],
)
)
)
)
);
}
}

The hierarchy should be :
body: SafeArea
- SingleChildScrollView
-Container(remove height)

Related

How can I add an Icon to to Box Decoration?

I want to add an Icon to Box Decoration like this you are seeing images on left side.
How do I add this with box decoration
Here is the code:
Container(
width: 307,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(10.0),
shape: BoxShape.rectangle,
),
child: CountryListPick(
onChanged: (list){
print(list?.name);
},
theme: CountryTheme(
labelColor: Colors.white,
isShowFlag:true,
isShowCode: false,
isShowTitle:true,
isDownIcon: true,
showEnglishName: true,
),
),
),

You can use this widget for a textfield with boxdecoration and icon:
TextFormField(
key: Key(key),
controller: controller,
decoration: InputDecoration(
prefixIcon: Icon(icon), // <-- left icon
hintText: hintText,
border: OutlineInputBorder( //<--- decoration border
borderRadius: BorderRadius.all(Radius.circular(90.0)),
borderSide: BorderSide.none,
),
filled: true,
),
)

You can use a row as a children of container
Container(
width: 307,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(10.0),
shape: BoxShape.rectangle,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Image.asset(
"assets/images/cover_placeholder.png",
height: 30,
width: 30,
fit: BoxFit.contain,
),
),
SizedBox(width: 12,),
Flexible(
child: CountryListPick(
onChanged: (list){
print(list?.name);
},
theme: CountryTheme(
labelColor: Colors.white,
isShowFlag:true,
isShowCode: false,
isShowTitle:true,
isDownIcon: true,
showEnglishName: true,
),
),
),
],
),
),

So you can use SizedBox or Container -
SizedBox(
width: 300.0,
height: 120.0,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
child: Row(
children: <Widget>[
Material(
type: MaterialType.transparency,
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(
top: 1.0, bottom: 1.0, right: 5.0),
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(15.0),
color: Colors.green[50],
),
child: IconButton(
icon: Icon(Icons.favorite),
color: Colors.red[700],
highlightColor: Colors.red,
onPressed: () {},
),
),
],
),
],
),
),
],
),
),
),
),

Widget Expanded height according to Listview content

I'm trying to put the height of the Expanded Widget to the size of the Listview inside it, but I'm not getting it, here's the code:
With the code below, the listviews are very small and shrunk and I would like to set a size or leave the auto size for the content, I already tried to change from Expanded to Flexible with fit: flexfit.loose and it didn't work either
class ProdutoPage extends GetView<ProdutosController> {
final controller = Get.find<ProdutosController>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('${Get.arguments}'),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(
bottom: 1.0, left: 1.0, right: 8.0, top: 1.0),
child: Badge(
position: BadgePosition.topEnd(top: 2, end: 2),
badgeColor: Colors.red.shade800,
badgeContent: Text(
controller.itensCarrinho.length.toString(),
style: TextStyle(color: Colors.white),
),
child: IconButton(
icon: Icon(Icons.shopping_cart_rounded),
iconSize: 40.0,
onPressed: () {},
),
),
)
],
),
body: SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Container(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Cores:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Expanded(
child: Obx(
() => ListView.builder(
scrollDirection: Axis.vertical,
itemCount: controller.produtosCoresList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: true,
contentPadding:
EdgeInsets.only(left: 3.0, right: 0.0),
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
title:
Text(controller.produtosCoresList[index].cor),
leading: Radio(
value: controller.produtosCoresList[index].cor,
groupValue: 'ROSA',
onChanged: (value) {},
activeColor: Colors.red.shade800,
),
);
}),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Tamanho:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Expanded(
child: Obx(
() => ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: controller.produtosTamanhoList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: true,
contentPadding:
EdgeInsets.only(left: 3.0, right: 0.0),
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
title:
Text(controller.produtosTamanhoList[index].tam),
leading: Radio(
value: controller.produtosTamanhoList[index].tam,
groupValue: 'IG',
onChanged: (value) {},
activeColor: Colors.red.shade800,
),
);
},
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Quantidade:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.only(
top: 8.0, bottom: 8.0, left: 150.0, right: 150.0),
child: TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Observações Gerais:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: 5,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Observações Internas:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: 5,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: ElevatedButton(
onPressed: () {},
child: Text('Adicionar ao Carrinho'),
style: ElevatedButton.styleFrom(
minimumSize: Size(400, 60),
textStyle: TextStyle(fontSize: 18),
),
),
)
],
),
),
),
),
);
}
}

You column is quite complex, I suggest you to use CustomScrollView, reference.
In CustomScrollView:
change your ListView widget to SliverList
change your Padding widget to SliverPadding
wrap your Text widget in SliverToBoxAdapter
wrap your Divider widget in SliverToBoxAdapter
and see how it works.

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';
}

SingleChildScrollView won't work? How to adjust layout when soft keyboard appears in flutter?

I'm a beginner in a flutter. The keyboard appears but the layout doesn't resize to keep it in view. I also checked with SingleChildScrollView but won't work. How to adjust layout when soft keyboard appears in flutter?
Here is my class :
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: MyColors.gray_dark,
appBar:
PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
body: Stack(
children: <Widget>[
Container(
child: Image.asset(
'assets/images/air_force_golden_jubilee_campus.jpeg',
fit: BoxFit.cover),
width: double.infinity,
height: double.infinity,
),
Container(color: MyColors.primaryDark.withOpacity(0.9)),
SingleChildScrollView(
child: Container(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 30),
Text("Welcome!",
style: MyText.display2(context).copyWith(
color: Colors.white, fontFamily: MyFonts.openSansBold)),
Container(height: 5),
Text(schoolDetails.schoolName,
style: MyText.title(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.w300,
fontFamily: MyFonts.openSansRegular)),
Container(height: 10),
Container(
width: 120,
height: 120,
child: Image.asset(
'assets/images/schools/air_force_bal_bharati_logo.png'),
),
Container(height: 10),
Container(height: 3, width: 40, color: Colors.white),
Container(height: 5),
Text("Log in",
style: MyText.medium(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: MyFonts.openSansBold)),
SizedBox(),
TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "USERNAME",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
),
),
Container(height: 25),
TextField(
style: TextStyle(color: Colors.white),
controller: passwordController,
keyboardType: TextInputType.text,
obscureText: _obscureText,
decoration: InputDecoration(
labelText: "PASSWORD",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Icon(
_obscureText
? Icons.visibility
: Icons.visibility_off,
color: Colors.white),
)),
),
Container(height: 20),
FloatingActionButton(
heroTag: "fab",
elevation: 0,
backgroundColor: Colors.white,
child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
onPressed: () {
/* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
return DashboardRoute(schoolDetails);
//return NoticeType();
}));*/
// LoginData data = new LoginData.section("sahood#traxsmart.in", "abc#123ABC");
progressDialog.show();
LoginData data = new LoginData.section(
nameController.text, passwordController.text);
_signIn(data);
},
),
SizedBox(),
Container(
width: double.infinity,
child: FlatButton(
child: Text("forgot password?",
style: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular)),
color: Colors.transparent,
onPressed: () {
/* LoginData data = new LoginData.section("+919061855558", "abc#123ABC");
_registerUser(data);*/
// confirm();
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return ForgotPassword();
// return NoticeType();
}));
},
),
)
],
),
),
)
],
),
);
bottom overflowed when keyboard shows error removing resizeToAvoidBottomInset: false.

Wrap your Stack Widget with a Container and use Single Child Scroll View on that Container.
Also, assign the height and width of the Container over the Stack to avoid Box Constraints taking infinite size.
return new Scaffold(
backgroundColor: Colors.grey,
appBar:
PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
Container(
child: Image.network(
'https://wizardsourcer.com/wp-content/uploads/2019/03/Stackoverflow.png'),
width: double.infinity,
height: double.infinity,
),
Container(color: Colors.grey[600]),
Container(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 30),
Text("Welcome!"),
Container(height: 5),
Text(
'School Name',
),
Container(height: 10),
Container(
width: 120,
height: 120,
child: Image.network(
'https://wizardsourcer.com/wp-content/uploads/2019/03/Stackoverflow.png'),
),
Container(height: 10),
Container(height: 3, width: 40, color: Colors.white),
Container(height: 5),
Text(
"Log in",
),
SizedBox(),
TextField(
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "USERNAME",
labelStyle: TextStyle(
color: Colors.white,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
),
),
Container(height: 25),
TextField(
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "PASSWORD",
labelStyle: TextStyle(
color: Colors.white,
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 2),
),
suffixIcon: GestureDetector(
onTap: () {
// setState(() {
// _obscureText = !_obscureText;
// });
},
child:
Icon(Icons.visibility_off, color: Colors.white),
)),
),
Container(height: 20),
FloatingActionButton(
heroTag: "fab",
elevation: 0,
backgroundColor: Colors.white,
child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
onPressed: () {
/* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
return DashboardRoute(schoolDetails);
//return NoticeType();
}));*/
// LoginData data = new LoginData.section("sahood#traxsmart.in", "abc#123ABC");
// progressDialog.show();
// LoginData data = new LoginData.section(
// nameController.text, passwordController.text);
// _signIn(data);
},
),
SizedBox(),
Container(
width: double.infinity,
child: FlatButton(
child: Text("forgot password?",
style: TextStyle(
color: Colors.white,
)),
color: Colors.transparent,
onPressed: () {
/* LoginData data = new LoginData.section("+919061855558", "abc#123ABC");
_registerUser(data);*/
// confirm();
// Navigator.push(context,
// MaterialPageRoute(builder: (BuildContext context) {
// return ForgotPassword();
// // return NoticeType();
// }));
},
),
)
],
),
)
],
),
),
),
);

The problem is You used a SIngleCHildScrollView() inside the stack that's why when the soft keyboard shows up its saying bottom overflow.
Solution:
remove the SingleChildScrollView() from inside stack
Wrap your Stack() with a Container()
And finally wrap your Container( with 'SIngleChildScrollView()'
return new Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: MyColors.gray_dark,
appBar:
PreferredSize(child: Container(), preferredSize: Size.fromHeight(0)),
body: SingleChildScrollView(
child: COntainer(
child: Stack(
children: <Widget>[
Container(
child: Image.asset(
'assets/images/air_force_golden_jubilee_campus.jpeg',
fit: BoxFit.cover),
width: double.infinity,
height: double.infinity,
),
Container(color: MyColors.primaryDark.withOpacity(0.9)),
Container(
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 30),
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 30),
Text("Welcome!",
style: MyText.display2(context).copyWith(
color: Colors.white, fontFamily: MyFonts.openSansBold)),
Container(height: 5),
Text(schoolDetails.schoolName,
style: MyText.title(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.w300,
fontFamily: MyFonts.openSansRegular)),
Container(height: 10),
Container(
width: 120,
height: 120,
child: Image.asset(
'assets/images/schools/air_force_bal_bharati_logo.png'),
),
Container(height: 10),
Container(height: 3, width: 40, color: Colors.white),
Container(height: 5),
Text("Log in",
style: MyText.medium(context).copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: MyFonts.openSansBold)),
SizedBox(),
TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "USERNAME",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
),
),
Container(height: 25),
TextField(
style: TextStyle(color: Colors.white),
controller: passwordController,
keyboardType: TextInputType.text,
obscureText: _obscureText,
decoration: InputDecoration(
labelText: "PASSWORD",
labelStyle: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2),
),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Icon(
_obscureText
? Icons.visibility
: Icons.visibility_off,
color: Colors.white),
)),
),
Container(height: 20),
FloatingActionButton(
heroTag: "fab",
elevation: 0,
backgroundColor: Colors.white,
child: Icon(Icons.chevron_right, color: Colors.cyan[800]),
onPressed: () {
/* Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
return DashboardRoute(schoolDetails);
//return NoticeType();
}));*/
// LoginData data = new LoginData.section("sahood#traxsmart.in", "abc#123ABC");
progressDialog.show();
LoginData data = new LoginData.section(
nameController.text, passwordController.text);
_signIn(data);
},
),
SizedBox(),
Container(
width: double.infinity,
child: FlatButton(
child: Text("forgot password?",
style: TextStyle(
color: Colors.white,
fontFamily: MyFonts.openSansRegular)),
color: Colors.transparent,
onPressed: () {
/* LoginData data = new LoginData.section("+919061855558", "abc#123ABC");
_registerUser(data);*/
// confirm();
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return ForgotPassword();
// return NoticeType();
}));
},
),
)
],
),
),
],
),
),),
);

how to resolve BOTTOM OVERFLOWED BY 84 PIXLES in Flutter Activity?

I am new to Flutter I have the following activity, when I click in Text Field Keyboard appears and then the warning e.g. BOTTOM OVERFLOWED BY 84 PIXLES also appears how can i be able to resolve this issue? when I tried SingleChildScrollView then empty area("where there is no Widgets") of activity gone white. Is there any Widget that is missing or i made a mistake in my code?
My Activity
here is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';
import 'bottomnavigationbar.dart';
class Payment2 extends StatefulWidget {
#override
_Payment2State createState() => _Payment2State();
}
class _Payment2State extends State<Payment2> {
#override
Widget build(BuildContext context) {
final PaymentButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Route route = MaterialPageRoute(builder: (context) => Paymentdone());
Navigator.pushReplacement(context, route);
},
child: Text("Payment",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.w800)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(16),
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
bottomNavigationBar: BottomNavigation(),
);
}
Widget cardnumber() {
return TextField(
style: style,
maxLength: 16,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'XXXX XXXX XXXX 1234',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
);
}
TextStyle style =
TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}

using a SingleChildScrollView is the right way to go.
in order to fix the issue you talked about, delete the color attribute from the container, and move it to the scaffold background color attribute:
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Column(
// the rest of the widgets...
),
),
);

Simply add resizeToAvoidBottomInset: false to your Scaffold

Also you can wrap the child inside SingleChildScrollView

Use SingleChildScrollView in body. To avoid white portion problem wrap it inside a Stack.
Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(16),
color: Colors.black,
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
)
],
)

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Bottom oveflowed by 82 pixels in flutter - android

The hierarchy should be : body: SafeArea - SingleChildScrollView -Container(remove height)

Related

How can I add an Icon to to Box Decoration?

Widget Expanded height according to Listview content

How to make validation stepper when form inside bottomsheet?

SingleChildScrollView won't work? How to adjust layout when soft keyboard appears in flutter?

how to resolve BOTTOM OVERFLOWED BY 84 PIXLES in Flutter Activity?

Categories

Resources