如何在 Flutter 中創建帶有圖標和文本的高架按鈕

Question

如何使用最新的按鈕小部件 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

在這種情況下，您可以添加具有多個子項的Row()或Wrap()小部件Icon()和Text()

ElevatedButton(
    onPressed:() {},
    child: Wrap(
        children: <Widget>[
        Icon(
            Icons.favorite,
            color: Colors.pink,
            size: 24.0,
        ),
        SizedBox(
            width:10,
        ),
        Text("Click me!", style:TextStyle(fontSize:20)),
        ],
    ),
),

Answer 3

您可以使用ElevatedButton.icon構造函數：

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

Answer 4

您可以為此使用 ElevatedButton.icon 構造函數

ElevatedButton.icon(
            icon: const Icon(Icons.add, size: 18),
            label: Text('My elevated button'),
            onPressed: () {},
          ),