Open In App

Flutter – Extended Icon Button

Improve
Improve
Like Article
Like
Save
Share
Report

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: 



Last Updated : 31 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads