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

Question

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

Answer 1

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.