Flutter：如何防止屏幕滚动并适合屏幕内的所有小部件

Question

由于某种原因，一切都非常适合我的设备，但是一旦在屏幕尺寸为 5.5" 的较小设备上使用它，屏幕就会滚动，并且一些元素或小部件位于屏幕之外，如下图所示。我有下面也列出了我的代码。

https://imgur.com/sbZs1V6

如何防止这种情况发生并将所有内容都放在屏幕内，无论屏幕大小如何？

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

  @override
  State<StatefulWidget> createState() => _OtpVerificationScreen();
}

class _OtpVerificationScreen extends State<OtpVerificationScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              //Logo
              const LogoForAuthScreens(),
              const Text(
                'Enter verification code',
                style: TextStyle(
                  // fontWeight: FontWeight.bold,
                  fontSize: 26,
                ),
              ),

              Container(
                margin: const EdgeInsets.only(top: 30, bottom: 20),
                child: const Text(
                  'We send a code to the following number:\n+01723456789',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black45,
                  ),
                ),
              ),
              Form(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    OtpInputField(),
                    OtpInputField(),
                    OtpInputField(),
                    OtpInputField(),
                    OtpInputField(),
                    OtpInputField(),
                  ],
                ),
              ),

              TextButton(
                onPressed: () {},
                child: const Text('Resend OTP'),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30, top: 30, right: 30),
                child: MaterialButton(
                  onPressed: () {
                    Navigator.of(context).pushNamed('/signup');
                  },
                  color: Colors.red,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  padding:
                      const EdgeInsets.symmetric(vertical: 20, horizontal: 30),
                  minWidth: double.infinity,
                  child: const Text(
                    'Continue',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用Flexible 小部件将每个小部件包装在列小部件中。这将导致它们根据可用空间动态调整大小。