flutter下面的設計應該使用哪個widget？

Question

我想用這個重新設計我當前的項目 UI，這里應該使用哪些小部件在 flutter 中實現這個屏幕

Answer 1

有幾種方法可以實現此屏幕，但我想您是 flutter 的新手，我將幫助您使用半成品小部件。 我建議你先在 Flutter 上尋找課程，然后再在 StackOverFlow 上詢問現成的組件。 這個社區旨在幫助程序員改進他們的代碼，而您的問題沒有代碼。

但是，我已經草擬了一些與您正在尋找的類似的代碼，我希望您可以使用此代碼開始您的項目和您的 flutter 之旅，但我也希望您注意更具體的編程問題。

開始：嘗試創建一個名為LoginWidget的文件並添加這段代碼，然后只需在您的主頁上調用該組件即可，您將擁有與您想要的類似的東西。 借此機會瀏覽組件並更改您想要的內容。

import 'package:flutter/material.dart';

class LoginWidget extends StatefulWidget {
  const LoginWidget({super.key});

  @override
  State<LoginWidget> createState() => _LoginWidgetState();

}

class _LoginWidgetState extends State<LoginWidget> {
  late bool _passwordIsVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: const EdgeInsets.all(20),
              child: Column(
                children: const [
                  SizedBox(height: 20),
                  Text(
                    'Login',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                    textAlign: TextAlign.left,
                  ),
                  SizedBox(height: 20),
                  Text(
                    'Welcome back! Please enter your details.',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                      fontWeight: FontWeight.w200,
                    ),
                    textAlign: TextAlign.left,
                  ),
                ],
              ),
            ),
            const SizedBox(height: 20),
            SizedBox(
              width: 600,
              child: Card(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
                margin: const EdgeInsets.all(0),
                child: Column(
                  children: [
                    const SizedBox(height: 50),
                    const SizedBox(
                      width: 300,
                      child: TextField(
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          labelText: 'Email',
                        ),
                      ),
                    ),
                    const SizedBox(height: 5, width: 300, child: Divider(color: Colors.orange,)),
                    const SizedBox(height: 20),
                    SizedBox(
                      width: 300,
                      child: TextFormField(
                        obscureText: !_passwordIsVisible,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          labelText: 'Password',
                          suffixIcon: IconButton(
                            icon: Icon(
                              _passwordIsVisible ? Icons.lock_open : Icons.lock,
                              color: Colors.black,
                            ),
                            onPressed: () {
                              setState(() {
                                _passwordIsVisible = !_passwordIsVisible;
                              });
                            },
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 5, width: 300, child: Divider(color: Colors.orange,)),
                    const SizedBox(height: 20),
                    const Text(
                      'Forgot password?',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.normal,
                      ),
                      textAlign: TextAlign.left,
                    ),
                    const SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: () {},
                      style: ElevatedButton.styleFrom(
                        primary: Colors.orange,
                        onPrimary: Colors.white,
                        minimumSize: const Size(250, 50),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25.0),
                        ),
                      ),
                      child: const Text('Login'),
                    ),
                    const SizedBox(height: 50),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}