Get rid of padding on virtual keyboard on android (flutter) - android

When I pull up the virtual keyboard on my virtual android device, it looks as follows:
As you can see, there is a sizable amount of black padding at the bottom of the keyboard. I can't figure out how to get rid of this.
I have already tried resizeToAvoidBottomPadding: false,, which removes the padding at the bottom of the screen when the keyboard is not showing, but doesn't help when it is. Would much appreciate any input!
Code:
Scaffold(
backgroundColor:const Color(0xffFFF6E0),
resizeToAvoidBottomPadding: false,
child:GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child:Container(
child: Stack(
overflow: Overflow.clip,
children: <Widget>[
AnimatedPositioned(
duration: Duration(milliseconds: 400),
top:5,
bottom: (mode == 1)?MediaQuery.of(context).size.height*.18:MediaQuery.of(context).size.height,
left:5,
right:5,
child:Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Theme.of(context).colorScheme.primary,
),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Text(
"Welcome Back!",
style: Theme.of(context).textTheme.display3.copyWith(fontSize: 44),
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
)
],
),
)
),
Positioned(
bottom:0,
left:0,
right:0,
child:
Align(
alignment: Alignment.bottomCenter,
child: RaisedButton(
color: const Color(0xff251605),
elevation: 4,
textColor: const Color(0xffFFF6E0),
//padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
child:
SizedBox(
width: 200,
height: 35,
child:
Text("Back",style:TextStyle(color:const Color(0xffFFF6E0),fontSize: 24,fontWeight:FontWeight.normal),textAlign: TextAlign.center,),
),
onPressed: (){
},
padding: const EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(40.0))
),
)
)
]
)
)
)


In your build method just before returning add this
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

Related

Flutter: Stack Overlap widget with second widget

Image link
How can I push the child widget outside the stack's bound.
I want to overlap the search bar at AppBar widget.
Stack's overflow property not working what we use instead of it.
I am using the positioned widget to move on child widget to outside the stack's boundary, but it remains same I am getting issue I need solution for this.
This is my code
PreferredSize _buildAppBar() {
return PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
centerTitle: true,
elevation: 0,
backgroundColor: Colors.transparent,
flexibleSpace: Stack(
clipBehavior: Clip.none,
fit: StackFit.loose,
// alignment: AlignmentDirectional.bottomEnd,
children: [
Expanded(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('images/gym.jpg'), fit: BoxFit.cover),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
// top: 90,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
// ignore: prefer_const_constructors
boxShadow: const [
BoxShadow(color: Colors.black12, blurRadius: 5)
]),
child: TextFormField(
// controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none,
),
hintText: 'Search Your Product',
hintStyle: TextStyle(color: Colors.grey[400]),
contentPadding:
const EdgeInsets.only(left: 22, right: 12),
fillColor: Colors.white,
filled: true,
suffixIcon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.search,
size: 30,
))),
// obscureText: obscureText,
),
),
),
],
),
title: const Text(
'Home',
style: TextStyle(
color: Colors.white,
),
),
),
);
}

One of possilbe ways is to use CustomScrollView with SliverAppBar and Stack
Here is the link to one of the solutions

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: () {},
),
),
],
),
],
),
),
],
),
),
),
),

use textField and listview.builder in bottom sheet

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

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

Bottom oveflowed by 82 pixels in flutter

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)

Categories

Resources