I am making an app in Flutter. Now I have put validator that to validate the email. But I want that if there is an google gmail account or any other valid email (actually has the user) then only the user should create account in app.
For example - Currently if I enter xyz#gmail.com then also the account is created on my app though this email doesn't exists as google account.
So my question is, Is there any way that app should validate first (If the email is valid account on gmail, outlook or any other but should be valid) and then account will create otherwise it should give error that Enter valid email???
I am using Firebase for Authentication.
My Code is below LoginPage.dart
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
String _email, _password, error = '';
bool _obscureText = true;
final Auth _auth = Auth();
_toggle(){
setState(() {
_obscureText = !_obscureText;
});
}
_submit() async {
if(_formKey.currentState.validate()){
_formKey.currentState.save();
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('email', _email);
dynamic result = await _auth.login(_email, _password);
if(result == null){
setState(() => error = 'There is no user record found. Please create account first!!!');
} else {
Navigator.pushNamed(context, HomePage.id);
}
print(_email);
print(_password);
}
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
child: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Login',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30.0, vertical: 10.0),
child: Padding(
padding: EdgeInsets.only(left: 5, right: 5, top: 5),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Email',
border: InputBorder.none,
filled: true,
fillColor: Colors.white60,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue,width: 2.0),
borderRadius: BorderRadius.circular(10.0)
),
/*enabledBorder: UnderlineInputBorder(
borderRadius: BorderRadius.circular(10.0)
)*/
),
validator: (input) => !input.contains('#')
? 'Please enter valid email'
: null,
onSaved: (input) => _email = input,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30.0, vertical: 10.0),
child: Stack(
alignment: const Alignment(0, 0),
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Password',
border: InputBorder.none,
filled: true,
fillColor: Colors.white60,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue,width: 2.0),
borderRadius: BorderRadius.circular(10.0)
),
),
validator: (input) => input.length < 6
? 'Must be at least 6 characters'
: null,
onSaved: (input) => _password = input,
obscureText: _obscureText,
),
Positioned(
right: 15,
child: Container(
height: 30,
child: ElevatedButton(
onPressed: (){
_toggle();
},
child: Text(
_obscureText ? 'Show' : 'Hide'
),
),
),
),
],
),
),
verticalSpaceMedium,
Container(
width: 200.0,
child: TextButton(
onPressed: _submit,
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.blue,
elevation: 5,
),
child: Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
),
),
verticalSpaceMedium,
Container(
width: 200.0,
child: TextButton(
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.blue,
elevation: 5,
),
onPressed: () => Navigator.pushNamed(context, SignupPage.id),
child: Text(
'Create Account',
),
),
),
verticalSpaceMedium,
Text(error, style: TextStyle(color: Colors.red, fontSize: 14),)
],
),
)
],
),
),
),
);
The above code works fine but want to add the validator that I have explained above.
See https://pub.dev/packages/email_validator. Do not attempt to write a regex to validate an email address. It will most certainly leave out some perfectly valid email forms that you might not have encountered yet. For example, both fred&barney#stonehenge.com (my autoresponder) and *#qz.to (an address a friend used for years, but now uses *#unspecified.example.com) are valid. Email Validator package correctly accepts both of those.
Related
I want to add some text validation to my CupertinoTextField but there's no validator for this Widget. How can I solve this?
I tried searching on the internet for some solutions but nothing came out.
CupertinoTextField(
prefix: Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
customIcon,
),
),
style: TextStyle(
fontSize: 30,
),
keyboardType: TextInputType.number,
maxLength: maxLength,
maxLines: 1,
maxLengthEnforced: true,
placeholder: placeholderText,
onChanged: onChangedFunction,
decoration: BoxDecoration(
border: Border.all(
width: 2.0,
color: CupertinoColors.inactiveGray,
),
borderRadius: BorderRadius.circular(32.0),
),
)
You need to use TextEditingController & perform the validation manually.
Basic validation for checking if the field is empty or not.
code:
TextEditingController _myPhoneField = TextEditingController();
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_myPhoneField.text.isEmpty) {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('error'),
content: Text('Phone Field is Empty'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('ok'))
],
);
});
} else {
// Validation passed
}
},
child: Text('submit'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoTextField(
clearButtonMode: OverlayVisibilityMode.editing,
controller: _myPhoneField, // Add this
prefix: Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
CupertinoIcons.phone_solid,
),
),
style: TextStyle(
fontSize: 30,
),
keyboardType: TextInputType.number,
maxLength: 10,
maxLines: 1,
maxLengthEnforced: true,
placeholder: 'Enter Phone',
onChanged: (v) {
print(v);
},
decoration: BoxDecoration(
border: Border.all(
width: 2.0,
color: CupertinoColors.inactiveGray,
),
borderRadius: BorderRadius.circular(32.0),
),
),
],
),
);
}
This is not about CupertinoTextField, but if you still want to validate input on Cupertino, you can use the CupertinoTextFormFieldRow widget.
CupertinoTextFormFieldRow(
controller: _usernameController,
validator: (value) {
if (value!.isEmpty || value.length < 4) {
return 'Please enter a valid username.';
}
return null;
},
decoration: BoxDecoration(
color: Colors.black12,
border: Border.all(
color: Colors.black12,
),
borderRadius: BorderRadius.circular(8.0),
),
)
I have a few fields taking info from a user. Some of which are TextFormFields, and others are buttons (FlatButton and PopupMenuButton). I would like to replicate the OutlineInputBorder hint style that is present around the TextFormFields to be displayed around my button fields. I've gotten pretty close:
empty fields
and with info inside the fields
filled fields
How can I make the help text of "Select Birthday" go inside the border like "First Name"? Here is the relevant code:
Padding(
padding: EdgeInsets.all(paddingStandard),
child: TextFormField(
textCapitalization: TextCapitalization.words,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0),
prefixIcon: Icon(Icons.person, color: colorMuted),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: colorPrimary)),
border: OutlineInputBorder(
borderSide: BorderSide(color: colorMuted)),
labelText: "First Name",
labelStyle: textMuted,
),
controller: nameController,
autofocus: false,
),
),
Padding(
padding: EdgeInsets.all(paddingStandard),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: colorMuted),
borderRadius: BorderRadius.circular(5),
),
child: FlatButton(
padding: EdgeInsets.all(paddingStandard),
onPressed: () async {
var selectedDate = await _getBirthday();
selectedDate ??= birthday;
setState(() {
birthday = selectedDate;
});
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
right: paddingStandard * 2),
child: Icon(Icons.cake, color: colorMuted),
),
RichText(
textAlign: TextAlign.left,
text: TextSpan(
text: birthday == null
? "Select Birthday"
: DateFormat('dd-MMM-yyyy')
.format(birthday),
style: birthday == null
? textMuted
: textDark))
]),
Icon(
Icons.keyboard_arrow_down,
color: textColorMuted,
)
],
))),
)
You can wrap the birthday button with a stack and display some text on top of the border if birthday != null.
Here is a code demo, (replace it with the birthday button container):
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: colorMuted),
borderRadius: BorderRadius.circular(5),
),
child: FlatButton(
padding: EdgeInsets.all(paddingStandard),
onPressed: () async {
var selectedDate = await _getBirthday();
selectedDate ??= birthday;
setState(() {
birthday = selectedDate;
});
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(children: <Widget>[
Padding(
padding:
EdgeInsets.only(right: paddingStandard * 2),
child: Icon(Icons.cake, color: colorMuted),
),
RichText(
textAlign: TextAlign.left,
text: TextSpan(
text: birthday == null
? "Select Birthday"
: DateFormat('dd-MMM-yyyy')
.format(birthday),
style: birthday == null
? textMuted
: textDark))
]),
Icon(
Icons.keyboard_arrow_down,
color: textColorMuted,
)
],
))),
Align(
alignment: Alignment.topLeft,
child: Transform.translate(
offset: Offset(50, -12),
child: birthday != null
? Container(
padding: EdgeInsets.symmetric(horizontal: 3),
color: Theme.of(context).canvasColor,
child: Text("birthday"),
)
: Container(),
),
),
],
),
Basically I have a login page where I first segement into 2 container with one covers 55% and 45% of the screen. Then on top of these 2 container I add one more container with top 40% of the screen size and in it I have one more container which hold my user name and password text field. So on the design wise I am ok.
Now the issue when the keyboard comes the password field is totally not visible. First I just had stack then I did google and some suggest to put the Scaffold and add this line resizeToAvoidBottomPadding: false, but seems does not work for me either too.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
child: Stack(
children: <Widget>[
// The containers in the background
new Column(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height * .55,
//color: Colors.blue,
decoration: new BoxDecoration(
image: new DecorationImage(image: new AssetImage("lib/assets/cbg.png"), fit: BoxFit.cover,),
),
),
new Container(
height: MediaQuery.of(context).size.height * .45,
color: Colors.white,
)
],
),
// The card widget with top padding,
// incase if you wanted bottom padding to work,
// set the `alignment` of container to Alignment.bottomCenter
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .40,
right: 20.0,
left: 20.0),
child: new Container(
height: MediaQuery.of(context).size.height * .45,
width: MediaQuery.of(context).size.width,
child: new Card(
color: Colors.white,
elevation: 4.0,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40.0),
child: Column(
children: <Widget>[
SizedBox(height: MediaQuery.of(context).size.height * .05),
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: new BorderSide(
color: Colors.blue
),
),
//fillColor: Colors.green
),
validator: (val) {
if(val.length==0) {
return "Email cannot be empty";
}else{
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),
SizedBox(height: MediaQuery.of(context).size.height * .05),
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Password",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: new BorderSide(
),
),
//fillColor: Colors.green
),
validator: (val) {
if(val.length==0) {
return "Password cannot be empty";
}else{
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),
],
),
)
),
),
),
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .80,
right: 50.0,
left: 50.0),
child: new FlatButton(
color: Colors.red,
child: Text("Press Me"),
onPressed: () {},
),
),
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .90,
right: 50.0,
left: 50.0),
child: new FlatButton(
color: Colors.red,
child: Text("Forgot Password ?"),
onPressed: () {},
),
)
],
)
)
);
}
}
After the changes the keyboard still appear a slight covering the textfield.
Can I achieve some
You should put all this inside a ListView, then when you open the keyboard the list will scroll up.
I'm 2 years late on this and you might find the solution already, but this is for someone who struggle to find the solution. (Include myself a couple a days ago)
To solve this, The "TextFormField" widget need another attribute called "scrollPadding".
TextFormField(
controller: controller,
scrollPadding: EdgeInsets.only(bottom:40), // THIS SHOULD SOLVE YOUR PROBLEM
decoration: InputDecoration(
labelText: title,
hintText: title,
filled: true,
fillColor: Colors.white,
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.grey, width: 1.0),
),
border: const OutlineInputBorder(),
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return title;
}
return null;
},
),
Im creating a login form in flutter and I want to use snackbar to show a message when login fails. I read this documentation and if i have this code should works
final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
Scaffold.of(context).showSnackBar(snackBar);
But return this error
Scaffold.of() called with a context that does not contain a Scaffold.
My login.dart all code
import 'package:flutter/material.dart';
import 'package:fluttercrud/screens/home_page.dart';
class LoginPage extends StatelessWidget {
static String tag = 'login-page';
#override
Widget build(BuildContext context) {
final logo = Hero(
tag: 'hero',
child: CircleAvatar(
backgroundColor: Colors.transparent,
radius: 48.0,
child: Image.asset('assets/logo.png'),
),
);
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
decoration: InputDecoration(
hintText: 'Usuario',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
final password = TextFormField(
autofocus: false,
obscureText: true,
decoration: InputDecoration(
hintText: 'Contraseña',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);
final loginButton = Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: () {
final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
Scaffold.of(context).showSnackBar(snackBar);
//Navigator.of(context).pushNamed(HomePage.tag);
},
color: Colors.blue[300],
child: Text('Entrar', style: TextStyle(color: Colors.white)),
),
),
);
final forgotLabel = FlatButton(
child: Text(
'¿Contraseña olvidada?',
style: TextStyle(color: Colors.black),
),
onPressed: () {},
);
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.only(left: 24.0, right: 24.0),
children: <Widget>[
logo,
SizedBox(height: 48.0),
email,
SizedBox(height: 8.0),
password,
SizedBox(height: 24.0),
loginButton,
forgotLabel
],
),
),
);
}
}
The scaffold return a error but i don´t know how can i fix this without rewrite all code.
So the question is: How can i to show the snackbar when login fails and avoid this error? And why this error appears?
UPDATED
void initState() {
super.initState();
final snackBar = SnackBar(
content: Text(
'Usuario/Contraseña incorrecto',
textAlign: TextAlign.center,
));
Scaffold.of(context).showSnackBar(snackBar);
seriesList = _createSampleData();
animate = false;
}
And how can i show snackbar when init page?
This is because you are using the context of the widget that creates the Scaffold (the parent context), not the context of the Scaffold itself. Thus the error.
You can fix the error either by creating a method builder that will receive the correct context:
Widget _buildLoginButton(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: () {
final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
Scaffold.of(context).showSnackBar(snackBar);
},
color: Colors.blue[300],
child: Text('Entrar', style: TextStyle(color: Colors.white)),
),
),
);
}
And refactor the page to use the builder method you've just created:
Scaffold(
appBar: AppBar(
title: Text('My Page'),
),
body: Builder(
builder: (context) =>
Column(
children: [
.....
_buildLoginButton(context),
.....
]
),
),
),
);
Or just extract the login button to its own Widget, without changing any other of your code, and it will receive the proper context.
class LoginButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: () {
final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
Scaffold.of(context).showSnackBar(snackBar);
},
color: Colors.blue[300],
child: Text('Entrar', style: TextStyle(color: Colors.white)),
),
),
);
}
}
friends, I am thinking to make this type of view but I can't able to set the button overlapping like the given image I am using stack widget which is containing the text fields and the buttons as given image please check and help me out I also tried to use the center widgets as well but the view is coming as required in it also i had used the positioned widget but its getting button bottom of the screen like this but i need as the above image
MyLayoutDesign
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
MyAppState myAppState() => new MyAppState();
return myAppState();
}
}
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new MaterialApp(home: new Scaffold(body: new Builder(
builder: (BuildContext context) {
return new Stack(
children: <Widget>[
new Image.asset(
'assets/images/bg.png',
fit: BoxFit.cover,
),
new Center(
child: new Container(
child: new Card(
color: Colors.white,
elevation: 6.0,
margin: EdgeInsets.only(right: 15.0, left: 15.0),
child: new Wrap(
children: <Widget>[
Center(
child: new Container(
margin: EdgeInsets.only(top: 20.0),
child: new Text(
'Login',
style: TextStyle(
fontSize: 25.0, color: secondarycolor),
),
),
),
new ListTile(
leading: const Icon(Icons.person),
title: new TextFormField(
decoration: new InputDecoration(
hintText: 'Please enter email',
labelText: 'Enter Your Email address',
),
keyboardType: TextInputType.emailAddress,
),
),
new ListTile(
leading: const Icon(Icons.lock),
title: new TextFormField(
decoration: new InputDecoration(
hintText: 'Please enter password',
labelText: 'Enter Your Password',
),
keyboardType: TextInputType.emailAddress,
obscureText: true,
),
),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 15.0),
child: Center(
child: Text(
"FORGOT PASSWORD",
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.black,
fontSize: 16.0),
),
),
),
Center(
child: Container(
margin: EdgeInsets.only(bottom: 40.0, top: 10.0),
child: Text.rich(
TextSpan(
children: const <TextSpan>[
TextSpan(
text: 'NEW USER ? ',
style: TextStyle(
fontSize: 16.0, color: Colors.black)),
TextSpan(
text: 'REGISTER',
style: TextStyle(
fontSize: 16.0,
decoration: TextDecoration.underline,
color: Colors.black)),
],
),
),
),
),
],
),
),
),
),
new RaisedButton(
onPressed: () {
print('Login Pressed');
},
color: primarycolor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
child: new Text('Login',
style: new TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold)),
),
],
);
},
)));
}
}
this is just one the many ways you can achieve the expected result.
In this case, i assume you know the height of the background.
Again, there are many ways to achieve what you want. There is nothing wrong with your code, you just have to get an understanding of how 'things' work in Flutter
Widget demo = Stack(
children: <Widget>[
//First thing in the stack is the background
//For the backgroud i create a column
Column(
children: <Widget>[
//first element in the column is the white background (the Image.asset in your case)
DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white
),
child: Container(
width: 300.0,
height: 400.0,
)
),
//second item in the column is a transparent space of 20
Container(
height: 20.0
)
],
),
//for the button i create another column
Column(
children:<Widget>[
//first element in column is the transparent offset
Container(
height: 380.0
),
Center(
child: FlatButton(
color: Colors.red,
child: Text("Press Me"),
onPressed: () {},
),
)
]
)
],
);
Here you can find your solution code below.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
MyAppState myAppState() => new MyAppState();
return myAppState();
}
}
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new MaterialApp(home: new Scaffold(body: new Builder(
builder: (BuildContext context) {
return new Stack(
children: <Widget>[
new Image.asset(
'assets/images/bg.jpeg',
fit: BoxFit.fitWidth,
),
new Center(
child: new Container(
height: 370.0,
child: Container(
height:250.0,
child: new Card(
color: Colors.white,
elevation: 6.0,
margin: EdgeInsets.only(right: 15.0, left: 15.0),
child: new Wrap(
children: <Widget>[
Center(
child: new Container(
margin: EdgeInsets.only(top: 20.0),
child: new Text(
'Login',
style: TextStyle(
fontSize: 25.0, color: Colors.red),
),
),
),
new ListTile(
leading: const Icon(Icons.person),
title: new TextFormField(
decoration: new InputDecoration(
hintText: 'Please enter email',
labelText: 'Enter Your Email address',
),
keyboardType: TextInputType.emailAddress,
),
),
new ListTile(
leading: const Icon(Icons.lock),
title: new TextFormField(
decoration: new InputDecoration(
hintText: 'Please enter password',
labelText: 'Enter Your Password',
),
keyboardType: TextInputType.emailAddress,
obscureText: true,
),
),
Container(
margin: EdgeInsets.only(top: 10.0, bottom: 15.0),
child: Center(
child: Text(
"FORGOT PASSWORD",
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.black,
fontSize: 16.0),
),
),
),
Center(
child: Container(
margin: EdgeInsets.only(bottom: 40.0, top: 10.0),
child: Text.rich(
TextSpan(
children: const <TextSpan>[
TextSpan(
text: 'NEW USER ? ',
style: TextStyle(
fontSize: 16.0, color: Colors.black)),
TextSpan(
text: 'REGISTER',
style: TextStyle(
fontSize: 16.0,
decoration: TextDecoration.underline,
color: Colors.black)),
],
),
),
),
),
Padding(padding: EdgeInsets.only(left: 120.0)),
],
),
),
),
padding: EdgeInsets.only(bottom: 30),
),
),
new Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 310.0)),
RaisedButton(
onPressed: () {
print('Login Pressed');
},
color: Colors.green,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
child: new Text('Login',
style: new TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold)),
),
],
)
)
],
);
},
)));
}
}
#ibhavikmakwana propsed a better solution to your question. The other answers all depend on the size of the background and are not screen independent. They both create an invisible object above the button (either by adding a Container or a Padding).
I was having that question too and did not find your question first.
His simple solution is to wrap the button in a Positioned widget and give it a bottom of 0 or < 0.
Positioned(
child: FlatButton(
color: Colors.red,
child: Text("Press Me"),
onPressed: () {},
),
right: 0,
left: 0,
bottom: 0,
)
I found out that the "bottom" attribute set to 0 will offset the widget by exactly 0.5*height of the widget.