position icon of ElevatedButton.icon to the right-CodePudding

Ive got a 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 ->

CodePudding user response：

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

CodePudding user response：

Instead of ElevatedButton.icon, you can try with just ElevatedButton

ElevatedButton(
          onPressed: () {},
          child: Row(
            children: [Text("Next"), Icon(Icons.arrow_forward)],
          ),
        )

CodePudding user response：

Try using directionally widget. import dart ui and make the direction rtl.

import 'dart:ui' as ui;

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