將 Form 與 TextFormField 一起使用時顫動空白屏幕

Question

我正在制作一個登錄屏幕，就像我有很多次一樣，但我一直遇到這個問題，不知道該怎么做。 有兩個TextFormFields ，在Column里面，在這樣的Form里面

  Widget loginForm() {
    return Form(
        key: _loginFormKey,
        child: Flexible(
          child: Column(
            children: [
              const SizedBox(
                height: 10,
              ),
              TextFormField(
                controller: _emailController,
                decoration: const InputDecoration(
                  suffix: Icon(Icons.mail_outline_rounded, color: Colors.red),
                  labelText: "Email",
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide: BorderSide(color: Color(0xFF7FCCDC))),
                ),
                validator: (email) {
                  return null;
                },
              ),
              const SizedBox(
                height: 10,
              ),
              TextFormField(
                controller: _passController,
                obscureText: true,
                decoration: const InputDecoration(
                  suffix: Icon(Icons.lock_outline, color: Colors.red),
                  labelText: "Password",
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide: BorderSide(color: Color(0xFF7FCCDC))),
                ),
                validator: (password) {
                  return null;
                },
              ),
            ],
          ),
        ),
    );
  }

此小部件放置在以下腳手架中：

        Padding(
          padding:
              const EdgeInsets.only(top: 175, left: 35, right: 35, bottom: 50),
          child: Center(
            child: Container(
              height: 300,
              width: 250,
              decoration: BoxDecoration(
                color: Color(0xFFFCFBF4).withOpacity(0.5),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SizedBox(height: 15),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Sign In',
                          style: TextStyle(
                              fontSize: 20, color: Color(0xFF6B6FAB))),
                    ],
                  ),
                  Row(
                    children: [
                      loginForm(),
                    ],
                  )
                ],
              ),
            ),
          ),
        )

當loginForm()小部件被移除時，屏幕會正常啟動。 但是，當它在那里時，屏幕會啟動空白。 我嘗試從TextFormFields中取出所有自定義項，並將它們放入大小受限的容器中，但這並沒有改變任何東西。 這與我過去填寫表格的方式沒有什么不同，也沒有錯誤。 問題是什么？

import 'package:flutter/material.dart';

class SignInScreen extends StatefulWidget {
  const SignInScreen({Key? key}) : super(key: key);

  @override
  State<SignInScreen> createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final _loginFormKey = GlobalKey<FormState>();

  Widget background() {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
          gradient: LinearGradient(colors: [
        Color(0xFF7157A0),
        Color(0xFF6B6FAB),
        Color(0xFF6C74B4),
        Color(0xFF697CB4)
      ], stops: [
        0.25,
        0.5,
        0.75,
        1
      ], begin: Alignment.topCenter)),
    );
  }

  final _emailController = TextEditingController();
  final _passController = TextEditingController();

  Widget loginForm() {
    return Form(
      key: _loginFormKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(
            height: 10,
          ),
          TextFormField(
            controller: _emailController,
            decoration: const InputDecoration(
              suffix: Icon(Icons.mail_outline_rounded, color: Colors.red),
              labelText: "Email",
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  borderSide: BorderSide(color: Color(0xFF7FCCDC))),
            ),
            validator: (email) {
              return null;
            },
          ),
          const SizedBox(
            height: 10,
          ),
          TextFormField(
            controller: _passController,
            obscureText: true,
            decoration: const InputDecoration(
              suffix: Icon(Icons.lock_outline, color: Colors.red),
              labelText: "Password",
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  borderSide: BorderSide(color: Color(0xFF7FCCDC))),
            ),
            validator: (password) {
              return null;
            },
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        background(),
        Padding(
          padding: const EdgeInsets.only(top: 55),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/logo.png', height: 100),
              SizedBox(width: 5),
              Text('GLOBE',
                  style: TextStyle(
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF7FCCDC)))
            ],
          ),
        ),
        Padding(
          padding:
              const EdgeInsets.only(top: 175, left: 35, right: 35, bottom: 50),
          child: Container(
            decoration: BoxDecoration(
              color: Color(0xFFFCFBF4).withOpacity(0.5),
              borderRadius: BorderRadius.circular(20),
            ),
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SizedBox(height: 15),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Sign In',
                          style:
                              TextStyle(fontSize: 20, color: Color(0xFF6B6FAB))),
                    ],
                  ),
                  loginForm()
                ],
              ),
            ),
          ),
        ),
      ],
    ));
  }
}

Answer 1

在此處刪除靈活並將 mainAxisSize min 添加到列小部件。 一個靈活的列內沒有邊界會破壞用戶界面

return Form(
        key: _loginFormKey,
      //child: Flexible( //remove this widget
          child: Column(
            mainAxisSize: MainAxisSize.min,
          )
);

你的布局應該是這樣的

Scaffold(
  body: Container(
   width: MediaQuery.of(context).size.width,
   height: MediaQuery.of(context).height,
    decoration: BoxDecoration(
     image: DecorationImage(
       image: AssetImage('image path here'),
     )
    )
   child: Column(
    children: []//place widgets here
   )
  )
)

現在，如果小部件足夠長以移動到設備的高度上，則使用 SingleChildScrollView 包裝列

編輯

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: SignInScreen());
  }
}

class SignInScreen extends StatefulWidget {
  const SignInScreen({Key? key}) : super(key: key);

  @override
  State<SignInScreen> createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final _loginFormKey = GlobalKey<FormState>();

  final _emailController = TextEditingController();
  final _passController = TextEditingController();

  Widget loginForm() {
    return Form(
      key: _loginFormKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(
            height: 10,
          ),
          TextFormField(
            controller: _emailController,
            decoration: const InputDecoration(
              suffix: Icon(Icons.mail_outline_rounded, color: Colors.red),
              labelText: "Email",
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  borderSide: BorderSide(color: Color(0xFF7FCCDC))),
            ),
            validator: (email) {
              return null;
            },
          ),
          const SizedBox(
            height: 10,
          ),
          TextFormField(
            controller: _passController,
            obscureText: true,
            decoration: const InputDecoration(
              suffix: Icon(Icons.lock_outline, color: Colors.red),
              labelText: "Password",
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                  borderSide: BorderSide(color: Color(0xFF7FCCDC))),
            ),
            validator: (password) {
              return null;
            },
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
          gradient: LinearGradient(colors: [
        Color(0xFF7157A0),
        Color(0xFF6B6FAB),
        Color(0xFF6C74B4),
        Color(0xFF697CB4)
      ], stops: [
        0.25,
        0.5,
        0.75,
        1
      ], begin: Alignment.topCenter)),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 55),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.network(
                    'https://thumbs.dreamstime.com/b/jpg-file-icon-logo-element-illustration-design-155443757.jpg',
                    height: 100),
                SizedBox(width: 5),
                Text('GLOBE',
                    style: TextStyle(
                        fontSize: 40,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF7FCCDC)))
              ],
            ),
          ),
          Expanded(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 35),
                child: Container(
                  margin: EdgeInsets.only(bottom: 40),
                  decoration: BoxDecoration(
                    color: Color(0xFFFCFBF4).withOpacity(0.5),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      SizedBox(height: 15),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('Sign In',
                              style: TextStyle(
                                  fontSize: 20, color: Color(0xFF6B6FAB))),
                        ],
                      ),
                      loginForm()
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ));
  }
}

Answer 2

class MyHome extends StatelessWidget {
  MyHome({Key? key}) : super(key: key);
  final _loginFormKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          background(context),
          Padding(
            padding: const EdgeInsets.only(top: 55),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                // Image.asset('assets/logo.png', height: 100),
                SizedBox(width: 5),
                Text('GLOBE',
                    style: TextStyle(
                        fontSize: 40,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF7FCCDC)))
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(
                top: 175, left: 35, right: 35, bottom: 50),
            child: Center(
              child: Container(
                decoration: BoxDecoration(
                  color: const Color(0xFFFCFBF4).withOpacity(0.5),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Column(
                  children: [
                    const SizedBox(height: 15),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text('Sign In',
                            style: TextStyle(
                                fontSize: 20, color: Color(0xFF6B6FAB))),
                      ],
                    ),
                    loginForm(),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget loginForm() {
    return Form(
      key: _loginFormKey,
      child: Flexible(
        child: Column(
          children: [
            const SizedBox(
              height: 10,
            ),
            TextFormField(
              controller: _emailController,
              decoration: const InputDecoration(
                suffix: Icon(Icons.mail_outline_rounded, color: Colors.red),
                labelText: "Email",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                    borderSide: BorderSide(color: Color(0xFF7FCCDC))),
              ),
              validator: (email) {
                return null;
              },
            ),
            const SizedBox(
              height: 10,
            ),
            TextFormField(
              controller: _passController,
              obscureText: true,
              decoration: const InputDecoration(
                suffix: Icon(Icons.lock_outline, color: Colors.red),
                labelText: "Password",
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                    borderSide: BorderSide(color: Color(0xFF7FCCDC))),
              ),
              validator: (password) {
                return null;
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget background(context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
        gradient: LinearGradient(colors: [
          Color(0xFF7157A0),
          Color(0xFF6B6FAB),
          Color(0xFF6C74B4),
          Color(0xFF697CB4)
        ], stops: [
          0.25,
          0.5,
          0.75,
          1
        ], begin: Alignment.topCenter),
      ),
    );
  }
}