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.
DeveloperXon 
Leave a Reply