[英]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.