如何在 flutter 上连接 2 个屏幕？

Question

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,
                              ),
                            ),


                          ]
                      )
                  ),
                )
            )
        )
    );
  }
}

Answer 1

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> {

}