Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to add Icon on Elevated Button in Flutter App

In this example code, we are going to show you the easiest way to add icon on Elevated Button. Icons are very important to represent the action of task of any widget inside app. See the example below:

How to Add Icon on Elevated Button:

ElevatedButton.icon(
    onPressed: (){
      print("You pressed Icon Elevated Button");
    }, 
    icon: Icon(Icons.save),  //icon data for elevated button
    label: Text("Elevated Button with Icon"), //label text 
)

You can simply add ElevatedButton.icon() widget, you will get the icon property where you can pass Icon data to add Icon on Elevated Button.

Full Code Example:

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Add Icon on Elevated Button"),
              backgroundColor: Colors.redAccent,
          ),
          body: Container( 
                  height: 200,
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(20),
                  child: ElevatedButton.icon(
                      onPressed: (){
                        print("You pressed Icon Elevated Button");
                      }, 
                      icon: Icon(Icons.save),  //icon data for elevated button
                      label: Text("Elevated Button with Icon"), //label text 
                      style: ElevatedButton.styleFrom(
                         primary: Colors.blueAccent //elevated btton background color
                      ),
                  ),
          )
      );
  }
}

Output Screenshot:

In this way, you can add Icon on Elevated button in Flutter app.

No any Comments on this Article


Please Wait...