How to Create Elevated Button with Icon and Text in Flutter

Many Flutter developers use ElevatedButton as their preferred button. In this blog post, let’s learn how to create an Elevated Button with Icon in Flutter.

You can add Elevated Button with icon and text using ElevatedButton.icon constructor. Then you can make use of properties such as icon and label to add icon and text.

ElevatedButton.icon(
          icon: Icon(
            Icons.favorite,
            color: Colors.pink,
            size: 24.0,
          ),
          label: Text('Elevated Button'),)

Following is the complete Flutter EleavatedButton with icon example.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Elevated Button with Icon Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Elevated Button with Icon and Text')),
        body: Center(
            child: ElevatedButton.icon(
          icon: Icon(
            Icons.favorite,
            color: Colors.pink,
            size: 24.0,
          ),
          label: Text('Elevated Button'),
          onPressed: () {
            print('Pressed');
          },
          style: ElevatedButton.styleFrom(
            shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(20.0),
            ),
          ),
        )));
  }
}

Following is the output of above Flutter example.

Flutter elevated button with icon and text

That’s how you add an ElevatedButton widget with icon in Flutter. I hope this tutorial will be helpful for you.

1 thought on “How to Create Elevated Button with Icon and Text in Flutter”

Leave a Comment

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