Flutter: mainaxisalignment not working with stack

Question

I cant get column space around to work with positioned in a stack, i tried putting it in a sizedbox and expanded and even a container but it still doesn't work.

Here is my code.

Stack(
            children: [
              Image.asset(
                "assets/icons/Group 5661.png",
                width: double.infinity,
                fit: BoxFit.contain,
              ),
              Positioned(
                left: 8.0,
                top: 30.0,
                child: Column(
                  // bottom: 20, right: 20, left: 20
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Your available balance',
                        style: TextStyle(
                            fontFamily: textfont,
                            color: Colors.white,
                            fontSize: 18,
                            fontWeight: FontWeight.w600)),
                    Text('0.00',
                        style: TextStyle(
                            fontFamily: textfont,
                            color: Colors.white,
                            fontSize: 30,
                            fontWeight: FontWeight.w600)),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(right: 26),
                          child: SizedBox(
                            width: MediaQuery.of(context).size.width / 3,
                            height: getProportionateScreenHeight(66),
                            child: TextButton(
                              style: TextButton.styleFrom(
                                  shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(6),
                                side: BorderSide(
                                  color: Colors.white,
                                ),
                              )),
                              onPressed: () {},
                              child: Text(
                                'Accounts',
                                style: TextStyle(
                                  fontSize: getProportionateScreenWidth(18),
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 26),
                          child: SizedBox(
                            width: MediaQuery.of(context).size.width / 3,
                            height: getProportionateScreenHeight(66),
                            child: TextButton(
                              style: TextButton.styleFrom(
                                  primary: Colors.orange,
                                  backgroundColor: Colors.orange,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(6),
                                  )),
                              onPressed: () {},
                              child: Text(
                                'Fund Wallet',
                                style: TextStyle(
                                  fontSize: getProportionateScreenWidth(18),
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),

I figured out that If I remove the stack widget it works but inside the positioned widget then the MainAxisAlignment dosent work on works for mainaxisalignment.start.

Could somebody please let me know what is this weird behavior and a solution to this?

Regards.

Answer 1

Your Column is taking just enough space to display its children. In order to have it full width, you should also specify a right anchor for your Positioned Widget.

Here is the situation before:

And after:

Positioned(
  left: 8.0,
  right: 8.0,
  top: 30.0,
  child: ...
),

Update after last comments:

child: Stack(
  children: [
    Positioned.fill(
      child: Container(
        padding: EdgeInsets.all(20.0),
        color: Colors.amber.shade300,
        child: Column(...),
      ),
    ),
  ],
),

Full code for easy copy-paste:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.blueGrey,
      child: Stack(
        children: [
          Positioned(
            left: 8.0,
            right: 8.0,
            top: 30.0,
            child: ColoredBox(
              color: Colors.amber.shade300,
              child: Column(
                // bottom: 20, right: 20, left: 20
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Your available balance',
                      style: TextStyle(
                          // fontFamily: textfont,
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.w600)),
                  Text('0.00',
                      style: TextStyle(
                          // fontFamily: textfont,
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.w600)),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 26),
                        child: SizedBox(
                          width: MediaQuery.of(context).size.width / 3,
                          height: 66, //getProportionateScreenHeight(66),
                          child: TextButton(
                            style: TextButton.styleFrom(
                                shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(6),
                              side: BorderSide(
                                color: Colors.white,
                              ),
                            )),
                            onPressed: () {},
                            child: Text(
                              'Accounts',
                              style: TextStyle(
                                fontSize: 18, //getProportionateScreenWidth(18),
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 26),
                        child: SizedBox(
                          width: MediaQuery.of(context).size.width / 3,
                          height: 66, //getProportionateScreenHeight(66),
                          child: TextButton(
                            style: TextButton.styleFrom(
                                primary: Colors.orange,
                                backgroundColor: Colors.orange,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(6),
                                )),
                            onPressed: () {},
                            child: Text(
                              'Fund Wallet',
                              style: TextStyle(
                                fontSize: 18, //getProportionateScreenWidth(18),
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}