I don't understand why but when I add Column to Align in Stack positioning breaks

 Stack(
      alignment: Alignment.bottomRight,
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(
              ....
        ),
        Align(  /// <-- doesn't work
          alignment: Alignment.bottomLeft,
          child: Column(
              children: [
                  Widget...
                  Widget...
              ]
        ),),
        Align(
          alignment: Alignment.bottomRight,
          child: Text('text')
        ),]),

with Column widgets are placed top left

CodePudding user response：

In the Stack, all elements are located at the top left. In order to control the position for widgets you need to use the Positioned.

 Positioned(
   right: 0,
   bottom: 0,
   child: Your Widget(),
 ),

This code example will place the widget in the stack at the bottom right

Or you can add this parameters in Column:

Column(
   mainAxisAlignment: MainAxisAlignment.end,
   crossAxisAlignment: CrossAxisAlignment.start,
   children: [],
)

CodePudding user response：

I would try to test following solutions:

• Wrap Column with Expanded
• Change mainAxisSize parameter of Column widget to minimal
• Wrap Stack with Expanded
• Wrap each Stack child with Expanded if neither of that is gonna work, i would try to combine some of that...

CodePudding user response：

Stack(
      alignment: Alignment.bottomRight,
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(
              ....
        ),
        Align(
          alignment: Alignment.bottomLeft,
          child: Column(
              mainAxisSize: MainAxisSize.min, /// <-solution
              children: [
                  Widget...
                  Widget...
              ]
        ),),
        Align(
          alignment: Alignment.bottomRight,
          child: Text('text')
        ),]),