如何在 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> {

}