Max
Max

Reputation: 1301

Page scrolling does not work, what is the reason?

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

Answers (1)

Ximena Díaz
Ximena Díaz

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

Related Questions