position icon of ElevatedButton.icon to the right

Question

I've got an elevated button with an icon where the icon is placed left to the text using ElevatedButton.icon. What I actually want is to place the icon to the right of the text. How can I do it my code :

    ElevatedButton.icon(
        onPressed: onPressed,
        icon:Icon(icon,
          color: color != null ? color : null,
          size: getIconSize(),
        ),
        label: Text(label),
        style: buttonStyle);

How it looks :

what I want :

Next ->

Calcicole

Answer 1

Use Directionality widget. Make the direction rtl.

Directionality(
      textDirection: TextDirection.rtl,
      child: ElevatedButton.icon(
        onPressed: () {},
        icon: Icon(
          Icons.arrow_back,
        ),
        label: Text("Test"),
     //.........
      ))

Now, you just need to add your style

Pretypify

But for internationalization to RTL languages, you would want the icon on the left, so you really want to use the direction opposite to the normal view direction. (Also you would want to reverse the arrow direction...) – Ninety

Answer 2

You could just use the regular ElevatedButton constructor and pass in a Row as its child, with your icon and text:

 ElevatedButton(
        onPressed: onPressed,
        style: buttonStyle,
        child: Row(mainAxisSize:MainAxisSize.min,
children:
[Text(label),
SizedBox.square(dimension: 4),
Icon(icon,color: color != null ? color : null,size: getIconSize()),
]),)

Heritage

Answer 3

Now you can add this property to the button, which places the icon at the end of the button:

iconAlignment: IconAlignment.end,

Cue