[英]Round button with text and icon in flutter
how to have a button with text and icon for the flutter
?如何为
flutter
设置一个带有文本和图标的按钮?
I wanted to have a button
which looks like icon with a text that is able to put at the bottom of the screen我想要一个看起来像图标的
button
,上面有一个可以放在屏幕底部的文本
For example, the icon is like at here: android-button-with-icon-and-text例如,图标如下: android-button-with-icon-and-text
You can simply use named constructors for creating different types of buttons with icons.您可以简单地使用命名构造函数来创建不同类型的带有图标的按钮。 For instance
例如
FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);
But if you have specfic requirements then you can always create custom button with different layouts or simply wrap a widget in GestureDetector .但是,如果您有特定要求,那么您始终可以创建具有不同布局的自定义按钮,或者简单地将小部件包装在GestureDetector 中。
You can achieve that by using a FlatButton
that contains a Column
(for showing a text below the icon) or a Row
(for text next to the icon), and then having an Icon
Widget and a Text
widget as children.您可以通过使用包含
Column
(用于在图标下方显示文本)或Row
(用于图标旁边的文本)的FlatButton
,然后将Icon
小部件和Text
小部件作为子项来实现这一点。
Here's an example:下面是一个例子:
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),
),
);
}
This will produce the following:这将产生以下内容:
Screenshot:截图:
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
],
),
),
),
),
)
Use Column or Row in a Button child, Row for horizontal button, Column for vertical, and dont forget to contain it with the size you need:在 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,),
],
),
),
),
If you need a button like this:如果您需要这样的按钮:
You can use RaisedButton
and use the child property to do this.您可以使用
RaisedButton
并使用 child 属性来执行此操作。 You need to add a Row and inside row you can add a Text
widget and an Icon
Widget to achieve this.您需要添加一个行,在行内您可以添加一个
Text
小部件和一个Icon
小部件来实现这一点。 If you want to use png image, you can use similar widget to achieve this.如果你想使用 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,
)
],
),
),
),
The way i usually do it is by embedding a Row inside the Raised button:我通常这样做的方法是在 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)
],
),
);
}
}
You can do something like,你可以做类似的事情,
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))
),
I hope this will help out.我希望这会有所帮助。 I am using flutter 2.10.1
我正在使用 flutter 2.10.1
ElevatedButton.icon(onPressed: null, icon: null, label: null);
How to use ElevatedButton.icon如何使用 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),
),
)
You can read the documentation here: https://api.flutter.dev/flutter/material/ElevatedButton/ElevatedButton.icon.html您可以在此处阅读文档: https://api.flutter.dev/flutter/material/ElevatedButton/ElevatedButton.icon.html
Congrats to the previous answers... But I realised if the icons are in a row (say three icons as represented in the image above), you need to play around with columns and rows.恭喜之前的答案......但我意识到如果图标在一行中(比如上图所示的三个图标),你需要玩弄列和行。
Here is the code这是代码
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FlatButton(
onPressed: () {},
child: Icon(
Icons.call,
)),
FlatButton(
onPressed: () {},
child: Icon(
Icons.message,
)),
FlatButton(
onPressed: () {},
child: Icon(
Icons.block,
color: Colors.red,
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
' Call',
),
Text(
'Message',
),
Text(
'Block',
style: TextStyle(letterSpacing: 2.0, color: Colors.red),
),
],
),
],
),
The FlatButton, RaisedButton and OutlineButton widgets have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively. FlatButton、RaisedButton 和 OutlineButton 小部件已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。
Just put this code below as Button.只需将此代码放在下面作为按钮。 Also the accepted answer is updated in September, 2021.
已接受的答案也在 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',),
),
If You need the text to be centered, and the image to be besides it, like this:如果您需要将文本居中,并将图像置于其旁边,如下所示:
Then You can achieve it with this widget tree:然后你可以用这个小部件树来实现它:
RaisedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text(
'Push it! '*10,
textAlign: TextAlign.center,
),),
Image.network(
'https://picsum.photos/250?image=9',
),
],
),
),
Full example available on my dartpad.dev (link).完整示例可在我的 dartpad.dev(链接)上找到。
In the Newest Version of Flutter, I think you can use Just IconButton Widget like this :在最新版本的 Flutter 中,我认为您可以像这样使用 Just IconButton Widget:
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(Icons.volume_up),
onPressed: () {},
),
Text('Volume')
],
);
}
Hope this helps out, learn more about it from this documentation .希望这会有所帮助,从这个 文档中了解更多信息。
Flutter 2.4:颤振 2.4:
The best recommended way is using ShapeDecoration最好的推荐方法是使用ShapeDecoration
Here is a example using an Inkwell (simulating a button, but you can use a button instead and get same result).这是使用 Inkwell 的示例(模拟按钮,但您可以改用按钮并获得相同的结果)。
InkWell(
onTap: (){},
child: Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(), //here we set the circular figure
color: Colors.red
),
child: Center(
child: Icon(
Icons.email,
size: 30,
color: Colors.white,
)
),
)
)
These are the posibles shapes in ShapeDecoration:这些是 ShapeDecoration 中的可能形状:
RoundedRectangleBorder(),
BeveledRectangleBorder(),
ContinuousRectangleBorder(),
CircleBorder(),
link example of result: https://images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png结果链接示例: https : //images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png
TextButton(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.blue)),
primary: Colors.black,
//backgroundColor: Colors.grey,
onSurface: Colors.grey,
minimumSize:
Size(MediaQuery.of(context).size.width - 20, 40)),
onPressed: () => null,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: new Text("b )",
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 14,
)),
),
Image.network(
'https://blabala7710263543.jpg'),
],
)),
ElevatedButton.icon(
icon: const Icon(
Icons.add_circle,
color: Colors.green,
),
onPressed: onPressed,
label: Text(
"Button",
style: const TextStyle(
fontSize: 16,
color: Colors.green),
),
style: ElevatedButton.styleFrom(
primary: Color.fromARGB(255, 45, 186, 239),
fixedSize: const Size(210, 45),
),
)
as of flutter 3.3.10 you can achieve this button using Container, Column and InkWell从 flutter 3.3.10 开始,您可以使用 Container、Column 和 InkWell 实现此按钮
Like:喜欢:
InkWell(
onTap: () {/*DO SOMETHING*/},
child: Container(
height: 100,//PREF HEIGHT
width: 100, //PREF WIDTH
alignment: Alignment.center,
color: Colors.orange, //YOUR BUTTON COLOR
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [Icon(Icons.add, size:18 /*PREF ICON SIZE*/),SizedBox(height:25), Text('MY BUTTON')]))),
Just use Row and Column combination to achieve the result.只需使用 Row 和 Column 组合即可获得结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.