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

Change position of icon of ElevatedButton

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)
                  ],
                ),
              ),
Change position of icon of ElevatedButton

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"),
                    //.........
                  ))
Change position of icon of ElevatedButton

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top