Site icon DIY Usthad

Change position of icon of ElevatedButton to the right – Flutter

Change position of icon of ElevatedButton to the right - Flutter

I’ll write here two methods to change the position of the icon of ElevatedButton.icon from left to the right in Flutter. If you know any better ideas please let me know in the comments.

Default Layout of ElevatedButton.icon()

Method 1

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

ElevatedButton(
                onPressed: () {},
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    Text('Elevated Button'),
                    Icon(Icons.settings)
                  ],
                ),
              ),

Method 2

Use Directionality widget. Make the direction rtl.

Directionality(
                  textDirection: TextDirection.rtl,
                  child: ElevatedButton.icon(
                    onPressed: () {},
                    icon: const Icon(
                      Icons.settings,
                    ),
                    label: const Text("Elevated Button"),
                    //.........
                  ))
Exit mobile version