[英]How to change OutlinedButton border color?
Flutter widget, I tried to change the OutlineButton border color by using BorderSide(color: Colors.blue). Flutter 小部件,我尝试使用 BorderSide(颜色:Colors.blue)更改 OutlineButton 边框颜色。 The OutlineButton always with grey color border no matter which color is set, but width change is applicable.
OutlineButton 无论设置哪种颜色都始终带有灰色边框,但宽度变化是适用的。 How to change the OutlineButton border line color?
如何改变OutlineButton的边框线颜色?
class OutlineButtonWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: OutlineButton(
onPressed: null,
borderSide: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
child: Text('outline button')
),
),
);
}
}
Use style
property使用
style
属性
OutlinedButton(
onPressed: () {},
child: Text('Outlined button'),
style: OutlinedButton.styleFrom(
side: BorderSide(width: 5.0, color: Colors.blue),
),
)
I was getting 'OutlineButton' is deprecated and shouldn't be used.我收到“OutlineButton”已弃用且不应使用的消息。 Use OutlinedButton instead.
请改用 OutlinedButton。 See the migration guide in flutter.dev/go/material-button-migration-guide).
请参阅 flutter.dev/go/material-button-migration-guide 中的迁移指南)。
Before migration code:迁移代码之前:
child: OutlineButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
color: Colors.orange,
borderSide: BorderSide(color: Colors.amber),
),
After migration code:迁移代码后:
child: OutlinedButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
style: OutlinedButton.styleFrom(backgroundColor: Colors.orange, side: BorderSide(color: Colors.amber)),
),
Here is official ref of backgroundColor and color properties: https://api.flutter.dev/flutter/material/ButtonStyle/backgroundColor.html这是 backgroundColor 和颜色属性的官方参考: https://api.flutter.dev/flutter/material/ButtonStyle/backgroundColor.html
https://api.flutter.dev/flutter/material/MaterialButton/color.html https://api.flutter.dev/flutter/material/MaterialButton/color.html
Style property will work样式属性将起作用
OutlineButton(
onPressed: (){},
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
),
),
I wanted to avoid manually theming each OutlinedButton
, and use theming instead.我想避免手动为每个
OutlinedButton
设置主题,而是使用主题设置。
You can do this with ThemeData
's outlinedButtonTheme
:您可以使用
ThemeData
的outlinedButtonTheme
来做到这一点:
final color = ...;
ThemeData(
...
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
side: MaterialStateProperty.all(const BorderSide(color: color)),
// surfaceTintColor: MaterialStateProperty.all(Colors.blue),
)),
);
use style property使用样式属性
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid)))
or try this both work或尝试这两个工作
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
)
OutlinedButton(
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid))),
onPressed: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12.0),
child: Icon(
Icons.clear,
size: 24,
),
),
),
Text("Clear")
],
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.