使用 CustomScrollView 时出现 Flutter RenderFlex 溢出错误

Question

I Get renderfexlx overflowed error even when all my widgets are inside custom scroll view widget. my scaffold body has a column that column have two expanded widgets all other widget i use are inside those expanded widgets.

I wrapped first column widget in SliverFillRemaining and CustomScrollView i still get renderflex overflowed error

i tried setting Column MainAxisSize to min it does not work.

my code

Scaffold(
          backgroundColor: Colors.transparent,
          body: CustomScrollView(
            reverse: true,
            slivers: [
              SliverFillRemaining(
                hasScrollBody: false,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Expanded(
                      flex: 3,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            'Welcome to\nMonumental habits.',
                            style: kTitle,
                            textAlign: TextAlign.center,
                          ),
                          SizedBox(
                            height: 30,
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 5,
                      child: Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 16),
                            child: Column(
                              children: [
                                LargeIconButton(
                                  buttonName: 'Continue with Google',
                                  icon: 'assets/images/auth/google_icon.png',
                                  onPressed: () {},
                                ),
                                SizedBox(
                                  height: 10,
                                ),
                                LargeIconButton(
                                  buttonName: 'Continue with Facebook',
                                  icon: 'assets/images/auth/facebook_icon.png',
                                  onPressed: () {},
                                ),
                                SizedBox(
                                  height: 30,
                                )
                              ],
                            ),
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                color: Colors.white,
                              ),
                              child: Column(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 14),
                                    child: Text(
                                      'Login with email',
                                      style: kBodyText3,
                                    ),
                                  ),
                                  Divider(
                                    height: 3,
                                    color: kPrimaryColor.withOpacity(0.7),
                                  ),
                                  SizedBox(
                                    height: 10,
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 14,
                                    ),
                                    child: Column(
                                      children: [
                                        MyTextFormField(
                                          hint: 'Email',
                                          icon: Icons.email_outlined,
                                          inputType: TextInputType.emailAddress,
                                          inputAction: TextInputAction.next,
                                          fillColor: kScaffoldBackground,
                                          focus: _focusNodes[0],
                                          vlidator: emailValidator,
                                        ),
                                        MyPasswordField(
                                          fillColor: kScaffoldBackground,
                                          focus: _focusNodes[1],
                                          validator: passwordValidator,
                                        ),
                                        MyTextButton(
                                            buttonName: 'Login',
                                            onPressed: () {},
                                            bgColor: kPrimaryColor),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        )

Answer 1

将 customScrollView 包装在设备大小的容器中，或者可以是一个 safeArea 小部件