Flutter ElevatedButton with icon and text

In this post, we will see how to create an ElevatedButon with icon and text.

To create an ElevatedButton with icon and text we use the ElevatedButton.icon constructor.

ElevatedButton.icon creates an ElevatedButton that arranges the icon and the label (text) in a row that is padded by 12 logical pixels at the start and 16 at the end, with an 8-pixel gap in between.

Now let’s see the code.

Before seeing the full code let me show you a simple code snippet.

ElevatedButton.icon(
          onPressed: () {},
          icon: Icon(Icons.call),
          label: Text("Call"))

Now let’s see the full code with the output.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("ElevatedButton Example")),
        body: ElevatedButtonExample(),
      ),
    );
  }
}

class ElevatedButtonExample extends StatefulWidget {
  @override
  State<ElevatedButtonExample> createState() => _ElevatedButtonExampleState();
}

class _ElevatedButtonExampleState extends State<ElevatedButtonExample> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton.icon(
          onPressed: () {}, icon: Icon(Icons.call), label: Text("Call")),
    );
  }
}

Output:

Now that you know how to add icon and text to the ElevatedButton, go and implement this in your flutter project.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: