Flutter Rounded Shape ElevatedButton with Icon

There are a lot's of tutorial available on internet regarding this topic but none of them are creating Icon inside ElevatedButton directly. They are using Clip or Gesture detector widgets. Which is a work around but not a fix solution if you are building a large scale app. But We are creating Icon button with ElevatedButton including Icon size and all other customization options. You can call icon from Flutter Inbuild package or directly from Google Icons here.

Flutter Rounded Shape ElevatedButton with Icon:

1. Creating ElevatedButton with Icon widget defined as its child widget.

Explanation :

• SizedBox : Defining ElevatedButton inside SizedBox widget as its child. This will allow us to define fixed width and height of button.
• borderRadius : To apply rounded border radius on button. Make sure you give it half of width and height. In my code example I am passing width and height both 70 than the radius value should be half of them which is 35.
• Icon : Child icon widget to show icon in button. You can pass any Icon here. HERE is the list of Flutter Icons and Here is the list of Google Icons which you can directly call here by just passing Icon name.

SizedBox(
      width: 70,
      height: 70,
      child: ElevatedButton(
        onPressed: temp,
        style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(35),
            ),
            backgroundColor: Colors.teal),
        child: const Icon(
          Icons.settings,
          size: 35,
        ),
      ),
    )

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});

  void temp() {
    print('Clicked...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: SizedBox(
      width: 70,
      height: 70,
      child: ElevatedButton(
        onPressed: temp,
        style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(35),
            ),
            backgroundColor: Colors.teal),
        child: const Icon(
          Icons.settings,
          size: 35,
        ),
      ),
    )))));
  }
}