Question posted in 
Im trying to figure out why in the tablet screen i have overflows i also used fit: FlexFit.tight, but still no luck, how i can stop a widget from overflow?
Also why does not Singlechildscrollview is not working ?
If i remove the constraints then it crashes and if i put more height then the buttons and all of my widgets get insane margins between them , maybe because flex getting bigger.
Thanks i post a picture also .
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: Container(
// width: screenWidth,
// height: screenHeight,
decoration: ContainerStyles.gradientBoxDecoration,
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: ConstrainedBox(
constraints:
BoxConstraints(maxHeight: screenHeight, maxWidth: screenWidth),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Big_Texts(
bigText: AppLocale.getString(
context, AppLocale.register_big_text,
languageCode: current_locale),
),
],
),
),
Flexible(
flex: 2,
child: Padding(
padding: EdgeInsets.all(screenWidth * 0.05),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Custom_TextField(
labelTexts: AppLocale.getString(
context, AppLocale.username_textfield,
languageCode: current_locale),
havePassword: false,
themeController: usernameController,
icon: Icons.person,
),
Big_Spacer(),
Custom_TextField(
labelTexts: AppLocale.getString(
context, AppLocale.password_textfield,
languageCode: current_locale),
havePassword: true,
themeController: passwordController,
icon: Icons.lock,
),
Big_Spacer(),
Custom_TextField(
labelTexts: AppLocale.getString(
context, AppLocale.repeat_password_textfield,
languageCode: current_locale),
havePassword: true,
themeController: repeatPasswordController,
icon: Icons.lock,
),
Big_Spacer(),
Custom_TextField(
labelTexts: AppLocale.getString(
context, AppLocale.email_textfield,
languageCode: current_locale),
havePassword: false,
themeController: emailController,
icon: Icons.email,
),
Big_Spacer(),
Custom_TextField(
labelTexts: AppLocale.getString(
context, AppLocale.carModel_textfield,
languageCode: current_locale),
havePassword: false,
themeController: carInfoController,
icon: Icons.car_rental,
),
],
),
),
),
Flexible(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Big_Button(
buttonText: AppLocale.getString(
context, AppLocale.register_button,
languageCode: current_locale),
onPressed: () async {
//register fuctionality
},
),
Big_Spacer(),
Secondary_Big_Button(
buttonText: AppLocale.getString(
context, AppLocale.back_button,
languageCode: current_locale),
onPressed: () {
Go_Back(context);
},
),
],
),
),
],
),
),
),
),
);
}
}
my textfield widget :
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return TextField(
obscureText: havePassword!,
decoration: InputDecoration(
//floatingLabelBehavior: FloatingLabelBehavior.always,
labelText: labelTexts,
labelStyle: TextStyle(
color: Colors.white70,
fontFamily: GoogleFonts.akatab().fontFamily,
fontSize: constraints.maxWidth * 0.04,
),
// hintText: '............',
// hintStyle: TextStyle(
// color: Colors.white70,
// fontFamily: GoogleFonts.akatab().fontFamily,
// fontSize: custom_textField_sizes.fontSize1,
// ),
icon: Icon(icon,
color: Colors.white70, size: constraints.maxWidth * 0.08),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white70, width: constraints.maxWidth * 0.005),
borderRadius: BorderRadius.all(
Radius.circular(constraints.maxWidth * 0.01),
),
),
contentPadding:
EdgeInsets.fromLTRB(constraints.maxWidth * 0.01, 0, 0, 0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white70, width: constraints.maxWidth * 0.01),
borderRadius: BorderRadius.all(
Radius.circular(constraints.maxWidth * 0.01),
),
),
),
style: TextStyle(
color: Colors.white70, fontSize: constraints.maxWidth * 0.1),
controller: themeController,
autofillHints: autofillHints,
);
},
);
}
}
2
Answers
Just add the scroll direction of the SingleChildScrollView It will be fix.
when you use flexible, it will split the screen to some part based on your total flex.
from your code the screen will split to 4 section with the same height.
in your case, the form height actually is more than the height it set, here is the section look like
Your SingleChildScrollView is not working because you use it outside. Eventhough the problem is the form section is too long. So you can try to move the SingleChildScrollView inside of the form section.
The widgets will be look like this :