如何在 web 上以 Flutter 形式居中對齊小部件

Question

我正在應用程序和 web 上構建一個 flutter 項目。登錄頁面有幾個問題。 首先，我的列小部件填滿了 Flutter web 上的整個寬度，但我希望它更居中。 其次，我正在嘗試居中對齊沒有帳戶？ 已發現自己與左側對齊的注冊按鈕。 請有人幫忙。 這是我的代碼和幾個屏幕截圖

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Card(
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    validator: (value) =>
                        value!.isEmpty ? 'Email cannot be empty' : null,
                    onSaved: (value) => _email = value!,
                    decoration: const InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      labelText: 'Email',
                      hintText: 'Email',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    validator: (value) =>
                        value!.isEmpty ? 'Password cannot be empty' : null,
                    onSaved: (value) => _password = value!,
                    decoration: const InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      labelText: 'Password',
                      hintText: 'Password',
                      border: OutlineInputBorder(),
                    ),
                    obscureText: true,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(0),
                  child: TextButton(
                    onPressed: () {
                      Navigator.pushNamed(context, '/resetpassword');
                    },
                    child: const Text('Forgot Password?'),
                    style: TextButton.styleFrom(
                      primary: Colors.black,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                    onPressed: validateAndSubmit,
                    child: const Text('Login'),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.black,
                      onSurface: Colors.black,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(15.0)),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: [
                      const Text('Dont have an account?'),
                      TextButton(
                        onPressed: () {
                          Navigator.pushNamed(context, '/signup');
                        },
                        child: const Text(
                          'Signup',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        style: TextButton.styleFrom(
                          primary: Colors.black,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

Answer 1

將“沒有帳戶？”居中 text 和 'Signup' TextButton，在 Row 中使用 mainAxisAlignment。

Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,//<-- this
                  children: [
                    const Text('Dont have an account?'),
                    TextButton(
                      onPressed: () {
                        Navigator.pushNamed(context, '/signup');
                      },
                      child: const Text(
                        'Signup',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      style: TextButton.styleFrom(
                        primary: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),

為了響應 web 和應用程序，我使用這種方法，

void main() async {
  runApp(
     const ResponsiveLayout(), 
  );
}

在我的 ResponsiveLayout const webScreenSize = 600;

Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > webScreenSize) {
          //webscreen
          return widget.webScreenLayout; // <-- send user Web screen
        } else {
          //mobile screen
          return widget.mobileScreenLayout; // <-- send user mobile screen
        }
      },
    );
  }

閱讀有關 LayoutBuilder 的更多信息 - https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html