I'm trying to create a Login and sign up page. How to make it go from the login screen to sign up page when pressed "Don't Have an Account?". Do I need to create 2 dart files? one for the login screen and one for the sign up screen.
Also How can I align the "Forgot Password?" Text to the right side?
This is my login screen.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
Color hexToColor(String code) {
return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Welcome to Flutter",
home: new Material(
child: new Container (
padding: const EdgeInsets.all(30.0),
color: Colors.grey[850],
child: new Container(
child: new Center(
child: new Column(
children : [
new Padding(padding: EdgeInsets.only(top: 140.0)),
new Text('Welcome!', //heading
style: new TextStyle(color: hexToColor("#ffffff"), fontSize: 30.0),),
new Padding(padding: EdgeInsets.only(top: 50.0)),
// email text field is below
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.blue,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(17.0),
borderSide: new BorderSide(
),
),
//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",
),
),
new Padding(padding: EdgeInsets.only(top: 20.0)),
//password text field is below
new TextFormField(
obscureText: true,
decoration: new InputDecoration(
labelText: "Enter Password",
fillColor: Colors.blue,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(17.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 Padding(padding: EdgeInsets.only(top: 10.0)),
new Text("Forgot Password?", style: TextStyle(
fontSize: 15.0,
color: Colors.grey[800],
fontFamily: "Poppins",
letterSpacing: 1.2,
),
),
new Padding(padding: EdgeInsets.only(top: 15.0)),
//Login button below
RaisedButton (
onPressed: () {},
color: Colors.amber,
padding: EdgeInsets.fromLTRB(75.0, 10.0, 75.0, 10.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17)),
child: Text("Login", style: TextStyle(
fontSize: 20.0,
letterSpacing: 1.2,
),),
),
new Padding(padding: EdgeInsets.only(top: 150.0)),
new Text(
"Don't Have an Account?",
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
]
)
),
)
)
)
);
}
}
You should create a new file for register, and use Navigator.push to navigate to register screen. You can wrap your Text in an InkWell or GestureDetector widget and trigger navigate action with onTap()
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => RegisterPage()) // this is you register page
);
},
child: new Text(
"Don't Have an Account?",
style: TextStyle(
fontSize: 15.0,
letterSpacing: 1.2,
),
),
)
To align your "Forgot Password?" string, wrap it in a Row widget and set MainAxisAlignment.end
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
new Text(
"Forgot Password?",
style: TextStyle(
fontSize: 15.0,
color: Colors.grey[800],
fontFamily: "Poppins",
letterSpacing: 1.2
)
)
]
)
register.dart
import 'package:flutter/material.dart';
class RegisterPage extends StatefulWidget {
@override
_RegisterPageState createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.