Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to position Widgets inside a Widget Stack that has Column Widgets Flutter

I have a view with a structure like this

- Stacks
    - Content
  - Widgets 1
  - Widgets 2

Widget 2 in my case is the set of buttons below.
I want them to always be at the bottom, like this:
enter image description here

I’ve managed to do it with code like this.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

class RedeemDetailUser extends StatefulWidget {

  const RedeemDetailUser({
    super.key,
  });

  @override
  State<RedeemDetailUser> createState() => _RedeemDetailUserState();
}

class _RedeemDetailUserState extends State<RedeemDetailUser> {

  @override
  Widget build(BuildContext context) {
    Widget body() {
      return Stack(
        children: [
          Container(color: Colors.white),

          /// IMAGE AND CONTENT

          /// BACK BUTTON

          /// BUTTOM BUTTON
          Align(
            alignment: AlignmentDirectional.bottomCenter,
            child: Container(
              padding: EdgeInsets.all(defaultMargin),
              decoration: BoxDecoration(
                color: whiteColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(18),
                  topRight: Radius.circular(18),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    blurRadius: 16,
                    offset: Offset(0, 1),
                  ),
                ],
              ),
              child: CustomButton(
                title: 'Redeem Now',
                onPressed: () async {
                  print('REDEEM');
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => RedeemNow(rcm: widget.rm)),
                  );
                },
              ),
            ),
          ),

        ],
      );
    }


    return SafeArea(
      child: Scaffold(
        body: body(),
      ),
    );
  }
}

But when I want to add another Widget in it:

Align(
  alignment: AlignmentDirectional.bottomCenter,
  child: Container(
    padding: EdgeInsets.all(defaultMargin),
    decoration: BoxDecoration(
      color: whiteColor,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(18),
        topRight: Radius.circular(18),
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.grey,
          blurRadius: 16,
          offset: Offset(0, 1),
        ),
      ],
    ),
    child: Column(
      children: [
        /// WANTS TO ADD ADDITIONAL WIDGET HERE BUT THE SIZE EXPANDING
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  quantity = max(1, quantity - 1);
                });
              },
              child: Container(
                width: 26,
                height: 26,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(width: 1),
                    image: DecorationImage(
                        image: AssetImage('assets/btn_min.png'))),
              ),
            ),
            SizedBox(
              width: 50,
              child: Text(
                quantity.toString(),
                textAlign: TextAlign.center,
                style: blackTextStyle,
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  quantity = max(1, quantity - 1);
                });
              },
              child: Container(
                width: 26,
                height: 26,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(width: 1),
                    image: DecorationImage(
                        image: AssetImage('assets/btn_add.png'))),
              ),
            ),
          ],
        ),
        CustomButton(
          title: 'Redeem Now',
          onPressed: () async {
            print('REDEEM');
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => RedeemNow(rcm: widget.rm)),
            );
          },
        ),
      ],
    ),
  ),
),

then it looks like this:
enter image description here

How could this happen?
Did I miss something?

Sounds trivial, but I really don’t understand.
Tried Positioned as well but instead got an error constrained box

Please help, thank you

>Solution :

You need to set mainAxisSize for this column :

Column(
      mainAxisSize: MainAxisSize.min, // <---- add this
      children: [
        /// WANTS TO ADD ADDITIONAL WIDGET HERE BUT THE SIZE EXPANDING
        Row(
      .... 
),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading