Max
Max

Reputation: 1301

Column in column widget overflow, how to fix?

I got an error while adding Column to Column. I need the whole page to scroll except for these elements: LogoAppBar and BackStepWidget. Therefore, I created a new column inside the column in which I placed all the widgets for scrolling and wanted to wrap the clone in a SingleChildScrollView but ran into a widget overflow problem (I attached a screenshot below). Tell me how to solve this error and make scrollable those elements that I need and not the whole page?

body

Column(
          children: [
            const LogoAppBar(isPadding: false),
            const SizedBox(height: 24),
            BackStepWidget(
                text: 'Balance after sending: $coins',
                textStyle: constants.Styles.bigHeavyTextStyleWhite),
            Column(
              children: [
                const Text('Send JoinCoins',
                    style: constants.Styles.bigHeavyTextStyleWhite),
                const Image(
                  image: AssetImage('assets/images/image.png'),
                ),
                const Text('I Want To Send',
                    style: constants.Styles.smallBoldTextStyleWhite),
                const SizedBox(height: 10),
                const CoinsCounterWidget(),
                const SizedBox(height: 10),
                const Text('JoynCoins',
                    style: constants.Styles.smallBoldTextStyleWhite),
                const SizedBox(height: 19),
                ClipRRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(24)),
                        color: constants.Colors.greyDark.withOpacity(0.5),
                      ),
                      child: Padding(
                        padding:
                            const EdgeInsets.only(top: 21, left: 12, right: 24),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            const Text(
                              'Close Connection',
                              style:
                                  constants.Styles.smallerHeavyTextStyleWhite,
                            ),
                            Padding(
                              padding:
                                  const EdgeInsets.only(top: 8, bottom: 17),
                              child: SizedBox(
                                  height: 188,
                                  child: FriendsList(
                                    isFavourites: true,
                                    controller: controller1,
                                  )),
                            ),
                            const Text(
                              'Other Connection',
                              style:
                                  constants.Styles.smallerHeavyTextStyleWhite,
                            ),
                            const SizedBox(height: 8),
                            const SearchWidget(),
                            Padding(
                              padding:
                                  const EdgeInsets.only(top: 17, bottom: 15),
                              child: SizedBox(
                                height: 188,
                                child: FriendsList(
                                  isFavourites: false,
                                  controller: controller2,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                const Padding(
                  padding:
                      EdgeInsets.only(top: 19, bottom: 50, left: 12, right: 12),
                  child: DefaultButtonGlow(
                      text: 'Buy Now',
                      color: constants.Colors.purpleMain,
                      textStyle: constants.Styles.buttonTextStyle,
                      shadowColor: constants.Colors.purpleMain,
                      borderColor: constants.Colors.purpleMain),
                ),
              ],
            ),
          ],
        ),

enter image description here

Upvotes: 0

Views: 2572

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63594

Your inner Column of ClipRRect children is not getting enough height, you can reduce the height of SizedBox or wrap with scrollable widget like SingleChildScrollView

Upvotes: 1

Related Questions