Flutter - Extended Icon Button
Last Updated :
28 Apr, 2025
In Flutter there are many prebuilt Button - Material Button, Text Button, Elevated Button, etc. In this article, we are going to implement the Extended Icon Button, which can be customized as per user need. We can give color to the button. A sample video is given below to get an idea about what we are going to do in this article.
Extended Icon Button package lets you add a beautiful Icon Button as per your need to your Flutter app.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package in the pubspec.yaml File
Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder. From the command line:
Dart
flutter pub add extended_icon_button
This will add the following code in the pubspec.yaml file
Step 3: Import the package into the main file
Dart
import 'package:extended_icon_button/extended_icon_button.dart';
Step 4: Call the runApp method inside the main and then create a stateless class.
Dart
import 'package:flutter/material.dart';
import 'package:extended_icon_button/extended_icon_button.dart';
void main() {
runApp(RunMyApp());
}
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body:
),
);
}
}
Step 5: In the body, Use the ExtendedIconButton widget that will create a button in the body of the scaffold, You also give the parameters height, width, text, textStyle, icon, button color etc.
Code Example
Dart
import 'package:flutter/material.dart';
import 'package:extended_icon_button/extended_icon_button.dart';
void main() {
runApp(RunMyApp());
}
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
// ExtendedIcon Button
child: ExtendedIconButtons(
onPressed: () {},
height: 50,
width: 500,
// title of the button
text: "Geeks For Geeks",
titleStyle: TextStyle(fontSize: 30),
textColor: Colors.black87,
// icon of the button
icon: Icons.arrow_back,
iconColor: Color.fromARGB(255, 0, 0, 0),
hoverElv: 20,
gradientColor1: Color.fromARGB(255, 4, 167, 45),
gradientColor2: Color.fromARGB(255, 20, 99, 33),
gradientColor3: Color.fromARGB(255, 6, 179, 83),
),
),
),
);
}
}
Output:
Similar Reads
Flutter - Circular Icon Button In this article, we will implement how to make a circular icon button in Flutter. A sample image is given below to get an idea about what we are going to do in this article. Â Step by Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter Development on Android Studio pl
2 min read
Flutter - Extended Floating Action Button In Flutter, the Floating Action Button (FAB) is a common UI Widget. There are scenarios where you might need to extend the functionality of the FAB to offer additional options or actions. In this article we are going to create a Floating Action Button by clicking it will show 2 more options we can a
4 min read
Flutter - Cupertino Icons Sometimes it happens we did not get the exact icons normally then we have to use the Cupertino icons and Cupertino icons contain mainly the iOS icons. This is an asset repo containing the default set of icon assets used by Flutter's Cupertino widgets. How to install it? First, we know how to install
4 min read
Flutter - Gradient Button Buttons are the building block of any Android Application, Buttons are helping in to perform specific tasks like Navigating from one screen to another screen, Showing the Toast, Sign-in, Sign-up buttons, and many more. But giving the effects of the colors to the Button makes the Button more pretty.
3 min read
How to Disable a Button in Flutter? Sometimes we need to make the button disabled, let us consider, you created a form to take the user input and a form submit button. Then you want that, the button must be disabled until the user fills all the fields of the form then immediately enable the button. Sample Output is given below what we
3 min read