position icon of ElevatedButton.icon to the right

user_13000378 0
Viewed 1776

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 :

enter image description here

what I want :

Next ->

flutter-layout dart flutter
2 Answers

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

enter image description here

user_107685350

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()),
]),)

Sample result

user_110868440
Related