如何在Flutter中创建带有图标和文本的升高按钮

s3fp2yjn  于 2023-01-21  发布在  Flutter
关注(0)|答案(4)|浏览(200)

如何使用最新的按钮小部件ElevatedButton创建一个包含文本和图标的按钮。

jdzmm42g

jdzmm42g1#

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),
            ),
          ),
        )));
  }
}
lnvxswe2

lnvxswe22#

您可以添加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)),
        ],
    ),
),
kcrjzv8t

kcrjzv8t3#

可以使用ElevatedButton.icon构造函数:

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

bq8i3lrv4#

您可以使用ElevatedButton.icon构造函数来执行以下操作

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

相关问题