How to Create Elevated Button with Icon and Text in Flutter

Question

How to create a button that has text and an icon by using the latest button widget ElevatedButton.

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Elevated Button',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Elevated Button with Icon and Text')),
        body: Center(
            child: ElevatedButton.icon(
          icon: Icon(
            Icons.home,
            color: Colors.green,
            size: 30.0,
          ),
          label: Text('Elevated Button'),
          onPressed: () {
            print('Button Pressed');
          },
          style: ElevatedButton.styleFrom(
            shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(20.0),
            ),
          ),
        )));
  }
}

Answer 2

You can use ElevatedButton.icon constructor:

ElevatedButton.icon(
                  onPressed: () {
                      //OnPressed Logic
                  },
                  icon: const Icon(Icons.plus_one),
                  label: const Text(
                      "Button Text"
                  )
                ),