dart - Set horizontal alignment in MaterialBanner in Flutter

Question

I'm trying to set a layout inside MaterialBanner. I need to set the red-colored widget in the bottom to the left. However, I cannot figure it out how and the square widgets are always right-aligned.

Here is my sample code. If you know how to implement it, I would like to know the tip. Thank you.

MaterialBanner(
  forceActionsBelow: true,
  actions: <Widget>[
    RaisedButton( // Tried Row, Expanded Widget but neither works
      child: Text('Red'),
      color: Color(0xff49A9EF),
    ),
    RaisedButton(
      child: Text('Blue 1'),
      color: Color(0xff49A9EF),
    ),
    RaisedButton(
      child: Text('Blue 2'),
      color: Color(0xff49A9EF),
    ),
  ],
  content: Text(
    'text text text text text text text text text text text text text text text text text text ',
    overflow: TextOverflow.ellipsis,
    maxLines: 2,
  ),
  ...
)

question from:https://stackoverflow.com/questions/65933560/set-horizontal-alignment-in-materialbanner-in-flutter

Answer 1

I've tried this and I can answer why the Red Box doesn't move to the left. The actions list of Widgets is always set to AlignmentDirectional.centerEnd so there is no way you can place a Widget in the actions list and expect it to be elsewhere.

What if the red box was passed to the leading property of the MaterialBanner Widget. Then we see that the box aligns on the top left with the provided content. Even when the padding is stripped off completely from the leading Widget it sticks to the top left. Any reason why you wouldn't write a custom Widget to accomplish this ?