Flutter: How to prevent screen from scrolling and fit all widgets inside the screen

Viewed 27

For some reason everything fits perfectly fine on my device but once using it on a smaller device with screen size 5.5" the screen is scrolling and some of the elements or widgets are outside the screen as shown in the images below. I have listed my code below as well.

enter image description here

How can I prevent this from happening and fit everything inside the screen, regardless the size of the screen?

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,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

1 Answers

You can wrap each widget inside your column widget with a Flexible widget. This will cause them to resize dynamically based on the available space.

Related