close

Flutter Corner

How to Create Elevated Button with Icon and Text in Flutter, Create Elevated Button with Icon and Text in Flutter, Elevated Button with Icon and Text in Flutter, Button with Icon and Text in Flutter, create elevated button with icon

How to Create Elevated Button with Icon and Text in Flutter

Hello guys how are you all? Hope you all are fine. As we know RaisedButton is deprecated and the Elevated button is replacing Raised Button widget with its new features. Here in this tutorial, we are going to learn How to Create Elevated Button with Icon and Text in Flutter

How to Create Elevated Button with Icon and Text in Flutter

Time Needed : 00 days 00 hours 03 minutes

Here in this tutorial, we are going to learn How to Create Elevated Button with Icon and Text in Flutter

  1. Use ElevatedButton.icon

    To Create Elevated Button with Icon and Text in Flutter We need to use ElevatedButton.icon widget instead of ElevatedButton widget. Here is example ElevatedButton.icon()

  2. Add Icon in ElevatedButton.icon widget

    Now ElevatedButton.icon widget has icon property Which requires Widget Icon as Value. Like this.
    ElevatedButton.icon(
    icon: Icon(Icons.android_outlined),
       onPressed: () {},
    ),

  3. Add Text ElevatedButton.icon widget

    ElevatedButton.icon widget has label property which require Text widget as value.Like this.
    ElevatedButton.icon(
    label: Text('FlutterCorner.com'),
    icon: Icon(Icons.android_outlined),
       onPressed: () {},
    ),

  4. Elevated Button with Icon and Text Created

    Our Elevated Button with Icon and Text has been created. here is my full code for batter understanding.

Tools
  • Flutter
  • Dart
  • Android Studio
Materials
  • Android Studio

Here Is My ElevatedButton With Text and Icons Example.

            ElevatedButton.icon(
              label: Text('FlutterCorner.com'),
              icon: Icon(Icons.android_outlined),
              onPressed: () {
                print('Button Pressed');
              },
            ),

Output

Faqs

  1. How to Create Elevated Button with Icon and Text in Flutter?

    To Create Elevated Button with Icon and Text in Flutter We need to use ElevatedButton.icon widget instead of ElevatedButton widget. Here is example ElevatedButton.icon()

  2. Create Elevated Button with Icon and Text in Flutter

    To Create Elevated Button with Icon and Text in Flutter We need to use ElevatedButton.icon widget instead of ElevatedButton widget. Here is example ElevatedButton.icon()

Summery

So it’s all About this tutorial. Hope this above-all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

Posted

in

by

Milan Dhameliya

Tags:

,

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *