圆形按钮与文本和图标在颤振

Question

如何有一个带有文字和图标的按钮flutter？

我希望有一个button看起来像图标的图标,文字可以放在屏幕的底部

例如,图标就像在这里:android-button-with-icon-and-text

Answer 1

截屏：

SizedBox.fromSize(
  size: Size(56, 56), // button width and height
  child: ClipOval(
    child: Material(
      color: Colors.orange, // button color
      child: InkWell(
        splashColor: Colors.green, // splash color
        onTap: () {}, // button pressed
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.call), // icon
            Text("Call"), // text
          ],
        ),
      ),
    ),
  ),
)

Answer 2

您可以简单地使用命名构造函数来创建带有图标的不同类型的按钮.例如

FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);

但是如果你有特定的要求,那么你总是可以创建具有不同布局的自定义按钮,或者只是在GestureDetector中包装一个小部件.

Answer 3

您可以通过使用来实现此目的，FlatButton该包含一个Column（用于在图标下方显示文本）或一个Row（用于在图标旁边的文本），然后将一个IconWidget和一个Text小部件作为子代。

这是一个例子：

class MyPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) =>
      Scaffold(
        appBar: AppBar(
          title: Text("Hello world"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () => {},
                color: Colors.orange,
                padding: EdgeInsets.all(10.0),
                child: Column( // Replace with a Row for horizontal icon + text
                  children: <Widget>[
                    Icon(Icons.add),
                    Text("Add")
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => {},
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      );
}

这将产生以下结果：

Answer 4

如果您需要这样的按钮：

您可以使用RaisedButtonchild 属性来执行此操作。您需要添加一个 Row 并在行内添加一个Text小部件和一个Icon小部件来实现此目的。如果你想使用 png 图像，你可以使用类似的小部件来实现这一点。

RaisedButton(
    onPressed: () {},
    color: Theme.of(context).accentColor,
    child: Padding(
      padding: EdgeInsets.fromLTRB(
          SizeConfig.safeBlockHorizontal * 5,
          0,
          SizeConfig.safeBlockHorizontal * 5,
          0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            'Continue',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w700,
              color: Colors.white,
            ),
          ),
          Icon(
            Icons.arrow_forward,
            color: Colors.white,
          )
        ],
      ),
    ),
  ),

Answer 5

我通常这样做的方法是在 Raised 按钮中嵌入一行：

class Sendbutton extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return RaisedButton(
          onPressed: () {},
          color: Colors.black,
          textColor: Colors.white,
          child: Row(
            children: <Widget>[
              Text('Send'),
              Icon(Icons.send)
            ],
          ),

        );
      }
    }

Answer 6

FlatButton、RaishedButton 和 OutlineButton 小部件已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。

只需将此代码放在下面作为按钮即可。此外，已接受的答案将于 2021 年 9 月更新。

TextButton.icon(
    style: TextButton.styleFrom(
      textStyle: TextStyle(color: Colors.blue),
      backgroundColor: Colors.white,
      shape:RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24.0),
      ), 
    ),
    onPressed: () => {},
    icon: Icon(Icons.send_rounded,),
    label: Text('Contact me',),
  ),

Answer 7

我希望这会有所帮助。我使用的是颤振2.10.1

ElevatedButton.icon(onPressed: null, icon: null, label: null);

如何使用 ElevatedButton.icon

ElevatedButton.icon(
        icon: const Icon(
          Icons.add_circle,
          color: Colors.white,
        ),
        onPressed: onPressed,
        label: Text(
          "Schedule",
          style: const TextStyle(
              fontSize: 16,
              color: Colors.white),
        ),
        style: ElevatedButton.styleFrom(
          primary: Color.fromARGB(255, 3, 133, 194),
          fixedSize: const Size(208, 43),
        ),
      )

您可以在此处阅读文档：https://api.flutter.dev/flutter/material/ElevatedButton/ElevatedButton.icon.html

Answer 8

在Button子项中使用Column或Row，水平按钮使用Row，垂直按钮使用Column，不要忘记将其包含在所需的大小中：

Container(
  width: 120.0,
  height: 30.0,
  child: RaisedButton(
    color: Color(0XFFFF0000),
    child: Row(
      children: <Widget>[
        Text('Play this song', style: TextStyle(color: Colors.white),),
        Icon(Icons.play_arrow, color: Colors.white,),
      ],
    ),
  ),
),

Answer 9

你可以做类似的事情，

RaisedButton.icon( elevation: 4.0,
                    icon: Image.asset('images/image_upload.png' ,width: 20,height: 20,) ,
                      color: Theme.of(context).primaryColor,
                    onPressed: getImage,
                    label: Text("Add Team Image",style: TextStyle(
                        color: Colors.white, fontSize: 16.0))
                  ),