[英]How do I add a border to a flutter button?
我最近刚刚进入 flutter 并且到目前为止我很喜欢它,但是我在一些 UI 更改上遇到了困难。 任何帮助表示赞赏!
我的目标是获得一个圆形按钮,它有一个蓝色背景的图标,但外面有一个深蓝色的边框。 附有图片。
我的方法是:
我卡在了第 3 步,因为我不知道如何添加边框,或者考虑到我处理问题的方式是否有可能。 具体的colors目前对我来说无所谓,稍后我会改变主题。
这是我目前拥有的代码:
var messageBtn = new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(20.0),
child: new RawMaterialButton(
onPressed: _messages,
child: new Padding(
padding: const EdgeInsets.all(20.0),
child: new Icon(
Icons.message,
size: 30.0,
color: Colors.white,
),
),
shape: new CircleBorder(),
fillColor: Colors.deepPurple,
),
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new Text(
'Send Messages',
style: new TextStyle(
fontSize: 20.0,
),
)),
],
);
它产生这个:
我要这个:
嗨,凯瑟琳,欢迎!
您可以通过深入了解组成MaterialButton
的小部件来实现您想要的。
首先,您需要Ink小部件。 这使用BoxDecoration提供了更灵活的样式。
Ink
然后可以包含一个InkWell小部件,该小部件可识别onTap
并绘制飞溅效果。 默认情况下,飞溅会持续到包含框的边缘,但您可以通过给InkWell
一个非常大的borderRadius
使其成为圆形。
以下是您要使用的按钮的示例:
Material(
type: MaterialType.transparency, //Makes it usable on any background color, thanks @IanSmith
child: Ink(
decoration: BoxDecoration(
border: Border.all(color: Colors.indigoAccent, width: 4.0),
color: Colors.indigo[900],
shape: BoxShape.circle,
),
child: InkWell(
//This keeps the splash effect within the circle
borderRadius: BorderRadius.circular(1000.0), //Something large to ensure a circle
onTap: _messages,
child: Padding(
padding:EdgeInsets.all(20.0),
child: Icon(
Icons.message,
size: 30.0,
color: Colors.white,
),
),
),
)
),
结果如下:
只需将一个IconButton
包装到一个Container
并设置其decoration
如下:
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 4),
color: Colors.yellow,
shape: BoxShape.circle,
),
child: IconButton(
iconSize: 56,
icon: Icon(Icons.check),
onPressed: () {},
),
),
可以使用带边框的 FloatingActionButton :
FloatingActionButton(
mini: false,
backgroundColor: Colors.blue.shade900,
splashColor: Colors.black,
onPressed: () {
logOutDialog(context);
},
hoverElevation: 1.5,
shape: StadiumBorder(
side: BorderSide(
color: Colors.blue, width: 4)),
elevation: 1.5,
child: Icon(
Icons.logout,
color: _foregroundColor,
),
)
在 Flutter 2 中有TextButton
:
TextButton(
style: ButtonStyle(
side: RedSelectedBorderSide(),
),
child: Text(
"Button"
),
onPressed: (){}
);
其中RedSelectedBorderSide()
是:
class RedSelectedBorderSide extends MaterialStateBorderSide {
@override
BorderSide resolve(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return BorderSide(
width: 2,
color: Colors.red,
); //
}
return null;// Defer to default value on the theme or widget.
}
}
对于TextButton
内部style
将side
与MaterialStateProperty
与BorderSide
一起使用。
TextButton(
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(width: 1, color: Colors.black),
),
),
child: Text(
"My Button"
),
onPressed: (){}
);
我来这里是为了了解如何为“CupertinoButton”添加边框。 我会在这里发布我的发现。 希望它会对某人有所帮助。
结果:
代码:
import 'package:flutter/cupertino.dart';
...
CupertinoButton(
minSize: 20,
padding: const EdgeInsets.all(0), // remove button padding
color: CupertinoColors.white.withOpacity(0), // use this to make default color to transparent
child: Container( // wrap the text/widget using container
padding: const EdgeInsets.all(10), // add padding
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromARGB(255, 211, 15, 69),
width: 1,
),
borderRadius: const BorderRadius.all(Radius.circular(10)), // radius as you wish
),
child: Wrap(
children: const [
Icon(CupertinoIcons.videocam_circle_fill, color: CupertinoColors.systemPink,),
Text(" Upload video", style: TextStyle(color: CupertinoColors.systemPink),)
],
),
),
onPressed: () {
// on press action
},
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.