Flutter comes with a very large number of free Icons for everyone. In flutter there are also Google Icons are inbuild. Means you do not need to import or download any icon if you are using Google Icons. They all are already present inside flutter project SDK. All we have to do is call them. ElevatedButton supports Icons itself using ElevatedButton.icon() widget. The ElevatedButton.icon() widget can make material buttons with material icons present inside it.
List of Icons available in Flutter Icons Class:
1. To see and use Flutter package inbuild Icons Visit HERE.
2. Scroll Down to screen and copy the Icon name to use.
List of Google Icons Inbuilt with Flutter:
1. To use Google Material Icons Visit HERE.
2. Select any Icon and then copy its name to use.
Flutter Create ElevatedButton with Icon:
1. Creating ElevatedButton with Icon.
ElevatedButton.icon(
onPressed: demo,
label: const Text('Download'),
icon: const Icon(Icons.arrow_drop_down_circle_sharp),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
Button Screenshot:
ElevatedButton.icon(
onPressed: demo,
label: const Text('Contact Us'),
icon: const Icon(Icons.assignment_ind),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.purple,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
Button Screenshot:
Directionality(
textDirection: TextDirection.rtl,
child: ElevatedButton.icon(
onPressed: demo,
label: const Text('Battery'),
icon: const Icon(Icons.battery_saver),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.brown,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
)),
Screenshot:
ElevatedButton.icon(
onPressed: demo,
label: const Text('Settings'),
icon: const Icon(Icons.settings),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
Screenshot:
ElevatedButton.icon(
onPressed: demo,
label: const Text('Language'),
icon: const Icon(Icons.language),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
Screenshot:
ElevatedButton.icon(
onPressed: demo,
label: const Text('Delete'),
icon: const Icon(Icons.delete_forever),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
),
),
Screenshot:
import 'package:flutter/material.dart';
void main() => runApp(const App());
class App extends StatelessWidget {
const App({super.key});
demo() {
print('Icon Button Clicked....');
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Center(
child: Column(children: [
ElevatedButton.icon(
onPressed: demo,
label: const Text('Download'),
icon: const Icon(Icons.arrow_drop_down_circle_sharp),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
ElevatedButton.icon(
onPressed: demo,
label: const Text('Contact Us'),
icon: const Icon(Icons.assignment_ind),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.purple,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
Directionality(
textDirection: TextDirection.rtl,
child: ElevatedButton.icon(
onPressed: demo,
label: const Text('Battery'),
icon: const Icon(Icons.battery_saver),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.brown,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
)),
ElevatedButton.icon(
onPressed: demo,
label: const Text('Settings'),
icon: const Icon(Icons.settings),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
ElevatedButton.icon(
onPressed: demo,
label: const Text('Language'),
icon: const Icon(Icons.language),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
ElevatedButton.icon(
onPressed: demo,
label: const Text('Delete'),
icon: const Icon(Icons.delete_forever),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
textStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
),
),
]),
))));
}
}
Screenshot:
Comments
Post a Comment