Reputation: 1301
I have a registration page with a lot of text fields. I've added scrolling with SingleChildScrollView to accommodate more textboxes on the page, but I'm running into a widget overflow error. Now I don't know how to properly add scrolling to the page. Perhaps the problem is that I use Stack, if so, how can I get around this problem? Tell me who knows how to do this?
SingleChildScrollView(
child: Stack(
children: [
child: SizedBox(
height: size.height,
width: size.width,
child: Padding(
padding: EdgeInsets.only(
top: size.height * 0.1,
right: 24,
left: 25,
bottom: 20,
),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: size.height * .70,
child: Column(
children: [
const Expanded(
flex: 3,
child: LogoWidget(),
),
Expanded(
flex: 3,
child: Text(
isSignUp
? 'Sign Up'
: 'Sign In',
style: constants.Styles
.xLargeHeavyTextStyleWhite,
),
),
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets
.symmetric(
horizontal: 0),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: [
const CloudServiceButton(
svgPictureName:
constants.Assets
.appleIcon,
onPressed: null,
isPng: false,
),
CloudServiceButton(
svgPictureName:
constants.Assets
.googleSvg,
heigh: 38,
width: 38,
onPressed: () =>
socialServiceCubit
.googleSignIn(),
isPng: false,
),
const CloudServiceButton(
svgPictureName:
constants.Assets
.facebookSvg,
heigh: 50,
width: 50,
onPressed: null,
isPng: false,
),
],
),
),
),
const SizedBox(
height: 28,
),
const OrDividerWidget(),
const SizedBox(
height: 24,
),
SizedBox(
height: isSignUp ? size.height * 0.5 : size.height * 0.36,
child: Column(
children: [
AnimatedSwitcher(
duration:
const Duration(
milliseconds:
0),
child: Column(
children: [
isSignUp
Column(
children: [
EmailSignInWidget(),
],
),
],
),
),
],
),
),
],
),
),
Expanded(
flex: 1,
child: AnimatedSwitcher(
duration: const Duration(
milliseconds: 200),
child: SizedBox(
height: 44,
child: DefaultButtonGlow(
text: isSignUp
? 'Sign Up'
: 'Next',
color: _isButtonEnable
? constants.Colors
.purpleMain
: isSignUp
? constants
.Colors
.greyXxLight
: constants
.Colors
.purpleMain,
onPressed: () async {
isSignUp
? _isButtonEnable
? _onTap(
unauthUserCubit,
tokenCubit)
: null
: _onTap(
unauthUserCubit,
tokenCubit);
},
textStyle: constants
.Styles
.normalHeavyTextStyleWhite,
),
),
),
),
Expanded(
flex: 1,
child: BottomTextButton(
isSignUp: isSignUp,
onPressed: () => _changeSign(),
),
),
],
),
),
),
],
),
Upvotes: 1
Views: 57
Reputation: 15
Same as previous answer, the reason why the widgets are overflowed is for the Stack parent. Stack is only for those widgets that need to be manually positioned (or being over other widgets). Replace Stack with Column or ListView and remove those Expanded widgets.
SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
top: size.height * 0.1,
right: 24,
left: 25,
bottom: 20,
),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
WidgetLogo(),
Row(children: [
ButtoniOs(),
ButtonGoogle(),
ButtonFacebook(),
],),
InputField(),
InputField(),
],
),
),
);
And on each child widget on Column parent you could use padding
Upvotes: 1