Flutter Change Position of Icon in ElevatedButton

In ElevatedButton default Icon position is left side of text. But to change the position of icon in ElevatedButton we have to wrap button as child in Directionality widget. Directionality widget sets the direction of the Text widget in flutter. After wrapping up we have to set the text direction right to left and it will change the icon location in button.

Flutter Change Position of Icon in ElevatedButton:

1. Creating ElevatedButton wrap inside Directionality widget as Child. We are creating Download Button.

   Directionality( 
            textDirection: TextDirection.rtl,
            child: ElevatedButton.icon(
              onPressed: demo,
              label: const Text('Download'),
              icon: const Icon(Icons.download),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.teal,
                textStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                ),
              ),
            )),

Screenshot:

2. Creating Upload Icon button with Icon placed at the right side of text.

   Directionality(
            textDirection: TextDirection.rtl,
            child: ElevatedButton.icon(
              onPressed: demo,
              label: const Text('Upload'),
              icon: const Icon(Icons.upload),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.cyan,
                textStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                ),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18)),
              ),
            ))

Screenshot:

3. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  demo() {
    print('Icon Button Clicked....');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Column(children: [
        Directionality( 
            textDirection: TextDirection.rtl,
            child: ElevatedButton.icon(
              onPressed: demo,
              label: const Text('Download'),
              icon: const Icon(Icons.download),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.teal,
                textStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                ),
              ),
            )),
        Directionality(
            textDirection: TextDirection.rtl,
            child: ElevatedButton.icon(
              onPressed: demo,
              label: const Text('Upload'),
              icon: const Icon(Icons.upload),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.cyan,
                textStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                ),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18)),
              ),
            ))
      ]),
    ))));
  }
}

App Screenshot: