How to add Icon to TextButton in Flutter
There are different types of buttons available in Flutter. TextButton is one among them and it helps to convert text to a button. In this Flutter tutorial, let’s learn how to add an icon to TextButton easily.
Adding a TextButton is easy but in order to add an icon beside the button you have to use TextButton.icon constructor. See the Flutter TextButton icon code snippet given below.
TextButton.icon(
style: TextButton.styleFrom(
foregroundColor: Colors.red,
textStyle: const TextStyle(fontSize: 20)),
icon: const Icon(Icons.rocket),
onPressed: () {},
label: const Text('Flutter TextButton'),
),
As you see, you should use icon property to add an icon and the label property to add the text. You will get the following output.
![flutter textbutton icon](https://codingwithrashid.com/wp-content/uploads/2022/12/flutter-textbutton-icon-485x1024.png)
On pressing the button a ripple effect appears across both the icon and the text.
![flutter textbutton icon example](https://codingwithrashid.com/wp-content/uploads/2022/12/textbutton-icon-example-flutter-485x1024.png)
Following is the complete code for this Flutter tutorial.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Flutter TextButton Icon Example',
),
),
body: Center(
child: TextButton.icon(
style: TextButton.styleFrom(
foregroundColor: Colors.red,
textStyle: const TextStyle(fontSize: 20)),
icon: const Icon(Icons.rocket),
onPressed: () {},
label: const Text('Flutter TextButton'),
),
));
}
}
I hope this Flutter TextButton Icon tutorial is helpful for you.