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

Question

我正在尝试创建一个登录和注册页面。 当按下“没有帐户？”时，如何从登录屏幕将其设置为 go 以注册页面。 我需要创建 2 个 dart 文件吗？ 一个用于登录屏幕，一个用于注册屏幕。

另外如何对齐“忘记密码？” 文本到右侧？

这是我的登录屏幕。

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

您应该为注册创建一个新文件，并使用 Navigator.push 导航到注册屏幕。 您可以将文本包装在 InkWell 或 GestureDetector 小部件中，并使用 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,
    ),
  ),
)

要对齐您的“忘记密码？” 字符串，将其包装在 Row 小部件中并设置 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
      )
    )
  ]
)

注册.dart

import 'package:flutter/material.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {

}