Search code examples
flutterfooterpersistentscaffold

Align Persistentfooterbutton of Scaffold to the right side


I want to display a List and beneath it a Persistent footer, a Column with some rows. I use persistentFooterButtons of Scaffold.

The closest to what I get is this:

enter image description here

But I am unable to align the fields to the right. When I work with Align or Spacer, the Widgets disappear.

The content of persistentFooterButtons.

FittedBox(
  child: Column(
    children: <Widget>[
      FlatButton(
        onPressed: () {
          Navigator.pushNamed(context, RouteName.BAUSTELLEN);
        },
        child: Align(
          alignment: Alignment.bottomLeft,
          child: Text('Bestellen'),
        ),
      ),
      Row(
        children: <Widget>[
          Text('$priceInfo '),
          MyFutureBuilder(
            future: sum,
            builder: (context, double sum) {
              var mySum = formatDoubleNumber(sum);
              return Text('$mySum');
            },
          ),
          Container(
            width: ImpexStyle.horizontalPadding,
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Text('Ihr Einkaufsrahmen '),
          Text(
            '$einkaufsrahmen',
            style: TextStyle(
                color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
          ),
          Container(
            width: ImpexStyle.horizontalPadding,
          ),
        ],
      ),
    ],
  ),
);

If I put the elements directly to persitentFooterButtons, this is what I get, the text is scattered around and my list is not shown.

enter image description here

and the Code

Scaffold(
  body: WarenkorbListe(),
  persistentFooterButtons: <Widget>[
    // WarenkorbFooter(),
              FlatButton(
        onPressed: () {
          Navigator.pushNamed(context, RouteName.BAUSTELLEN);
        },
        child: Align(
          alignment: Alignment.bottomLeft,
          child: Text('Bestellen'),
        ),
      ),
      Row(
        children: <Widget>[
          Text('$priceInfo '),
          Container(
            width: ImpexStyle.horizontalPadding,
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Text('Ihr Einkaufsrahmen '),
          Text(
            '$einkaufsrahmen',
            style: TextStyle(
                color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
          ),
          Container(
            width: ImpexStyle.horizontalPadding,
          ),
        ],
      ),

  ],
);

Solution

  • Try to align with your column instead

    FittedBox(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end, // this
        children: <Widget>[