Is there something like mainaxisaligment for a stack?

February 17, 2023

Is there a way to align the blue chart bars to the bottom instead of the top?

Here’s the code, the blue bar is the FractionallySizedBox:

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 20,
          child: FittedBox(
            child: Text('\$${getShortForm(spendingAmount)}'),
          ),
        ),
        SizedBox(
          height: 4,
        ),
        Container(
          height: 64,
          width: 10,
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: 1),
                  color: Color.fromRGBO(220, 220, 220, 1),
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              FractionallySizedBox(
                heightFactor: spendingPctOfTotal,
                child: Container(
                  decoration: BoxDecoration(
                    color: Theme.of(context).primaryColor,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 4,
        ),
        Text(label)
      ],
    );
  }
}

I tried working with the Stack’s alignment attribute but that didn’t seem to work. It seems I can only work with the order in which the children are stacked, not position. I tried wrapping it with a column but that broke the entire thing.

>Solution :

Mostly we need to wrap stack children with positioned widget like Aling/Positioned. For your case

child: Stack(
  alignment: Alignment.bottomCenter,//default is topStart
  children: [

Align(
  alignment: Alignment.bottomCenter,
  child: FractionallySizedBox(
    heightFactor: .3,
    child: Container(
      alignment: Alignment.bottomCenter,
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
    ),
  ),
),