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),
),
),
),
],
),
),
])
]),
Related
Hi I have this UI and I want to set button in end of the screen. How can I do this?
This is my code. This code is show how I design this UI. I want to know how I can set button in end of screen.I set the up
TextField in padding To be spaced with the button.I try to increase the value of padding but it don't work good. Do I have other solution?
Container(
height: height,
width: width,
child: SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10, top: 30),
child: new InputField(
textController: receiverController,
hint: 'نام گیرنده پیام را وارد کنید',
label: 'گیرنده',
obscure: false,
icon: Icons.person_add_alt_1_outlined,
radius: 15,
),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: new InputField(
textController: subjectController,
hint: 'عنوان پیام را وارد کنید',
label: ' عنوان ',
obscure: false,
icon: Icons.title,
radius: 15,
// suffixIcon: Icon(Icons.lock),
),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: new InputField(
textController: textController,
// hint: 'پیام ',
label: ' متن',
obscure: false,
icon: Icons.message,
radius: 15,
// suffixIcon: Icon(Icons.lock),
),
),
new Padding(
padding: const EdgeInsets.all(80),
child: new ButtonTheme(
minWidth: width * .25,
height: 50,
child: new RaisedButton(
onPressed: () {
this.newmessageBloc.add(new NewmessageEventSend(
receiver: receiverController.text,
subject: subjectController.text,
text: textController.text));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
'ارسال',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Icon(
Icons.send_rounded,
color: Colors.white,
),
],
),
color: new Color(0xff333399),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
)),
)
you can use Expanded widget on a Column and after that write you'r btn like this:
Column(
children: [
Expanded(
child: Container(
child: SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding:
const EdgeInsets.only(left: 15, right: 10, top: 30),
child: Text(""),
),
SizedBox(
height: 10,
),
new Padding(
padding: const EdgeInsets.only(left: 15, right: 10),
child: Text(""),
),
SizedBox(
height: 10,
),
],
),
),
),
),
new Padding(
padding: const EdgeInsets.all(80),
child: new ButtonTheme(
minWidth: 25,
height: 50,
child: new RaisedButton(
onPressed: () {
// this.newmessageBloc.add(new NewmessageEventSend(
// receiver: receiverController.text,
// subject: subjectController.text,
// text: textController.text));
},
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(
'ارسال',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16),
),
Icon(
Icons.send_rounded,
color: Colors.white,
),
],
),
color: new Color(0xff333399),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
)),
),
],
)
sorry, I was forced to remove some part of code, because i didn't know about them.
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')
],
),
),
],
),
),
),
),
]
),
),
),
);
}
In the Login screen, there is a background image and all stuff will be scrollable but SingleChildScrollView is not showing macth_parent height. My aim is to design like here
class MyLoginOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image:new NetworkImage('https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg')
)
),
child: new BackdropFilter(
filter:new ImageFilter.blur(sigmaX: 1.1,sigmaY:1.1),
child: new Container(
decoration: new BoxDecoration(color: Colors.black45.withOpacity(0.5)),
child: new SingleChildScrollView(
child: new Container(
child: new Column(
children: <Widget>[
new Container(
height: 200.0,
child: new Stack(
children: <Widget>[
new Align(
alignment: AlignmentDirectional.center,
child:new Container(
height: 120.0,
width: 120.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white30
),
)
),
new Align(
alignment: AlignmentDirectional.center,
child: new Container(
child: new Text("Farha",style: new TextStyle(
color: Colors.white,
fontSize: 14.0,
fontFamily: "WorkSansLight"
),),
),),],))],),),)),), ));}}
my circle container height is about 200.0 but SingleChildScrollView is not showing full height.
Code of the required layout - its not 100% but get the job Done. You can Complete it as required.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg'))),
),
Center(
child: SingleChildScrollView(
padding: EdgeInsets.all(30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
CircleAvatar(
radius: 58.0,
child: Text('Travel'),
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.person,
color: Colors.white,
),
hintStyle: TextStyle(color: Colors.white),
filled: true,
fillColor: Colors.black45,
hintText: 'Username'),
),
SizedBox(
height: 10.0,
),
TextFormField(
decoration: InputDecoration(
filled: true,
prefixIcon: Icon(Icons.lock, color: Colors.white),
hintStyle: TextStyle(color: Colors.white),
fillColor: Colors.black45,
hintText: 'Password'),
),
SizedBox(
height: 15.0,
),
FlatButton(
onPressed: () {},
child: Text(
'Forgot your Password?',
style: TextStyle(color: Colors.white),
)),
SizedBox(
height: 15.0,
),
RaisedButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text('LOGIN')),
color: Colors.redAccent,
textColor: Colors.white,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text('REGISTER')),
color: Colors.grey,
textColor: Colors.white,
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
Expanded(
child: Divider(
color: Colors.white,
height: 8.0,
),
),
SizedBox(
width: 8.0,
),
Text(
'OR',
style: TextStyle(color: Colors.white),
),
SizedBox(
width: 8.0,
),
Expanded(
child: Divider(
color: Colors.white,
height: 8.0,
),
)
],
),
Row(
children: <Widget>[
// TODO Social Icons
],
),
],
),
),
),
],
),
);
}
OutPut:
A Container widget will size themselves to its child, unless specified.
In your case:
...
Container(
height: double.infinity, // <-----
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg')))
...
Hi I want to display the CircularProgressIndicator in centre of my screen on top of all widget. it should be like overlay.
Right now when CircularProgressIndicator is visible all widgets move down a bit to display CircularProgressIndicator . I want it should be overlay. Does anyone know how to do that ?
import 'package:flutter/material.dart';
import 'package:roomie/auth/Auth.dart';
class ForgotPasswordScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return ForgotPasswordScreenState();
}
}
class ForgotPasswordScreenState extends State<ForgotPasswordScreen> {
var emailController = new TextEditingController();
var authHandler = new Auth();
bool isLoading = false;
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(
child: isLoading
? Center(child: CircularProgressIndicator())
: new Container()),
],
),
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(
controller: emailController,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
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: () {
setState(() {
isLoading = true;
});
authHandler
.sendPasswordResetEmail(emailController.text)
.then((void nothing) async {
await showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
content: new Text(
"Password reset email has been sent."),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("OK"),
onPressed: () {
Navigator.pop(context);
},
),
],
);
},
);
Navigator.pop(context);
setState(() {
isLoading = false;
});
}).catchError((e) => print(e));
},
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(
"FORGOT PASSWORD",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
)));
}
}
Stack is what you'r looking for :
https://docs.flutter.io/flutter/widgets/Stack-class.html
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Stack(
children:<Widget>[ Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
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(
controller: emailController,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
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: () {
setState(() {
isLoading = true;
});
authHandler
.sendPasswordResetEmail(emailController.text)
.then((void nothing) async {
await showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
content: new Text(
"Password reset email has been sent."),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("OK"),
onPressed: () {
Navigator.pop(context);
},
),
],
);
},
);
Navigator.pop(context);
setState(() {
isLoading = false;
});
}).catchError((e) => print(e));
},
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(
"FORGOT PASSWORD",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
)),
isLoading ? Container(
color: Colors.black.withOpacity(0.5),
child: Center(
child: CircularProgressIndicator(),
),
) : Container()
],
));
}
2021: Although Stack is a phenomenal option, a simple showDialog will do the trick. It is clean, efficient, and will give you a fade in/out animation. Code:
onEvent: () {
showDialog(
barrierDismissible: false,
builder: (ctx) {
return Center(
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
},
context: context,
);
},
When the event is completed, call Navigator.of(context).pop();. If you want the user to be able to tap the screen and close the dialog manually, delete the barrierDismissable: false code. If you have issues with the .pop(), you may want to specifically use the dialog's context when dismissing.
Hi I am trying to build a login screen in flutter but I am getting below error when opening it.
No material widget found textfield widgets require a material widget ancestor
import 'package:flutter/material.dart';
Widget LoginPage() {
return new 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 how to resolve it ?
Error states that TextField widgets require a Material widget ancestor. Simply wrapping your whole loginWidget into Scaffold will solve the problem.
Widget LoginPage() {
return new Scaffold(body: *your whole code*)
}
Just wrap your widget with Material like this:
#override
Widget build(BuildContext context) {
return Material(
child: YourAwesomeWidget(),
}
Since most of the widget asks for material widget as their parent widget
its a good practice you should use Material() or Scaffold() widget on top of the widget tree and then continue your code.
#override
Widget build(BuildContext context) {
return Material(
child: body(),
}
OR
#override
Widget build(BuildContext context) {
return Scaffold(
child: body(),
}
Wrap the loginpage function with a Scaffold or a MaterialApp
Widget LoginPage() {
return new Scaffold(
body: Container(
*the rest of your code*
),
);
}
or
Widget LoginPage() {
return new MaterialApp(
home: Container(
*the rest of your code*
),
);
}
I encountered your same problem. Always remember to enter Scaffold remembering that it must be included as a parent who creates the page, inside it after, you will insert all the widgets you want, but Scaffold after MaterialApp is the second component that must be added if you are creating a new page.
I got this error when trying to show a TextFormField as my content widget in a CupertinoDialogAlert. My fix was to wrap content in a Card with an elevation of 0 and transparent color. content is an argument passed as a Widget. So it could really be any type of widget. I noticed that if I pass a Text widget, it loses its centering, so I programmatically do that as well.
return CupertinoAlertDialog(
title: title,
content: Card(
elevation: 0,
color: Colors.transparent,
child: (content is Text)
? Text(content.toString(), textAlign: TextAlign.center)
: content,
actions: actions);