Need help. I have created a column on the page inside which there are 2 more columns, so I moved the buttons that are at the bottom to the very bottom so that they are always at the bottom of the screen. But when I add a SingleChildScrollView to make the page scroll, the space between the columns disappears and the bottom buttons move under other widgets. How can I solve the problem so that when adding a SingleChildScrollView, there is an empty space and the buttons remain at the very bottom of the screen?

body

Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                const SizedBox(height: 121.0),
                BackStepWidget(
                  text: 'Balance: $coins',
                  textStyle: constants.Styles.largeHeavyTextStyleWhite,
                ),
                const Text(
                  'Buy JoinCoins',
                  style: constants.Styles.bigHeavyTextStyleWhite,
                ),
                const Image(
                  image: AssetImage('assets/images/image.png'),
                ),
                const Text('I Want To Buy',
                    style: constants.Styles.smallBoldTextStyleWhite),
                const SizedBox(height: 10),
                const CoinsCounterWidget(),
                const SizedBox(height: 10),
                const Text('JoynCoins',
                    style: constants.Styles.smallBoldTextStyleWhite),
              ],
            ),
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(bottom: 24),
                  child: DefaultButtonGlow(
                    text: 'Buy me JoynCoins for 100% battery.',
                    color: constants.Colors.greyLight.withOpacity(0.4),
                    textStyle: constants.Styles.buttonTextStyle,
                    shadowColor: Colors.transparent,
                    borderColor: constants.Colors.purpleMain,
                    onPressed: () {
                      showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return const DefaultAlertDialog(
                            text:
                                'Please set a payment method for buying JoynCoins.',
                          );
                        },
                      );
                    },
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 47),
                  child: DefaultButtonGlow(
                    text: 'Buy Now ',
                    color: constants.Colors.purpleMain,
                    textStyle: constants.Styles.buttonTextStyle,
                    shadowColor: constants.Colors.purpleMain,
                    borderColor: constants.Colors.purpleMain,
                    onPressed: () {
                      showDialog(
                          context: context,
                          builder: (BuildContext context) {
                            return const DefaultAlertDialog(
                              text: "You'r about to buy",
                              isText2: true,
                              text2: '2500 JoynCoins',
                            );
                          });
                    },
                  ),
                )
              ],
            )
          ],
        ),
      ));

Added SingleChildScrollView

Without SingleChildScrollView

CodePudding user response：

Use SizedBox in between Columns or use the following inside Singlechildscrollview

physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,

CodePudding user response：

You can simplify this code to understand the issue. MainAxisAlignment.spaceBetween will provide maximum spaces between widgets.

body: Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text("top"),
    Text("bottom"),
  ],
),

Once you wrapped with SingleChildScrollView, Column takes minimum height for its children and become,

You can use SizedBox to provide space between items. You can use LayoutBuidler that I've posted on your previous question. For this I am using MediaQuery

body: SingleChildScrollView(
  child: Column(
    children: [
      Text("top"),
      SizedBox(
        height: MediaQuery.of(context).size.height * .4,
      ), // you custom height
      Text("bottom"),
    ],
  ),
),