颤动-更改 OutlineInput镶边的边框颜色

我试图改变边框颜色的 OutlineInputBorder,但尝试了无数种方法,失败了。

我通过 buildDarkTheme()函数创建了整个主题配置,但是我不能将边框颜色改为黄色

下面是图片和代码:

enter image description here

import 'package:flutter/material.dart';


void main() => runApp(new MyApp());


const kBlackHalf = const Color(0xFF212121);
const kBlackLight = const Color(0xFF484848);
const kBlack = const Color(0xFF000000);
const kYellow = const Color(0xFFffd600);
const kYellowLight = const Color(0xFFffff52);
const kYellowDark = const Color(0xFFc7a500);
const kWhite = Colors.white;


ThemeData buildDarkTheme() {
final ThemeData base = ThemeData();
return base.copyWith(
primaryColor: kBlack,
accentColor: kYellow,
scaffoldBackgroundColor: kBlackHalf,
primaryTextTheme: buildTextTheme(base.primaryTextTheme, kWhite),
primaryIconTheme: base.iconTheme.copyWith(color: kWhite),
buttonColor: kYellow,
textTheme: buildTextTheme(base.textTheme, kWhite),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderSide: BorderSide(color: kYellow)
),
labelStyle: TextStyle(
color: kYellow,
fontSize: 24.0
),
),
);
}


TextTheme buildTextTheme(TextTheme base, Color color) {
return base.copyWith(
body1: base.headline.copyWith(color: color, fontSize: 16.0),
caption: base.headline.copyWith(color: color),
display1: base.headline.copyWith(color: color),
button: base.headline.copyWith(color: color),
headline: base.headline.copyWith(color: color),
title: base.title.copyWith(color: color),
);
}


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: buildDarkTheme(),
home: new HomePage(),
);
}
}


class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}


class _HomePageState extends State<HomePage> {
String xp = '0';


@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
actions: <Widget>[
new IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {},
)
],
),
body: new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new ListView(
children: <Widget>[
new InkWell(
onTap: () {},
child: new InputDecorator(
decoration: new InputDecoration(
labelText: 'XP',
border: OutlineInputBorder()
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Text(this.xp),
],
),
),
)
],
),
)
);
}
}

更多参考资料:

无法更改文本字段边框颜色

Https://github.com/flutter/flutter/issues/17592

143444 次浏览

像这样将 hintColor 添加到主题中,它应该会更改 OutlineInputEdge 的颜色。

ThemeData buildDarkTheme() {
final ThemeData base = ThemeData();
return base.copyWith(
primaryColor: kBlack,
accentColor: kYellow,
scaffoldBackgroundColor: kBlackHalf,
primaryTextTheme: buildTextTheme(base.primaryTextTheme, kWhite),
primaryIconTheme: base.iconTheme.copyWith(color: kWhite),
buttonColor: kYellow,
hintColor: YOUR_COLOR,
textTheme: buildTextTheme(base.textTheme, kWhite),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
labelStyle: TextStyle(
color: kYellow,
fontSize: 24.0
),
),
);
}

这将把按钮的轮廓颜色改为蓝色

new OutlineButton(
borderSide: BorderSide(color: Colors.blue),
)

从7月份开始,你可以使用 enabledBorder:

new TextField(
decoration: new InputDecoration(
enabledBorder: const OutlineInputBorder(
// width: 0.0 produces a thin "hairline" border
borderSide: const BorderSide(color: Colors.grey, width: 0.0),
),
border: const OutlineInputBorder(),
labelStyle: new TextStyle(color: Colors.green),
...
),
)

有关新的装饰者,请参见 完整的文件

要更改卡片的边框颜色,请使用下面的代码

new Card(
shape: const RoundedRectangleBorder(
side: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
child: Container(new Text("Text in a card"))

只需更改 ThemeData 的 hintColor 属性,如下所示:

Theme(
data: ThemeData(
primaryColor: kYellowDark,
hintColor: kYellow,
),
child: Material(....),
);

Theme小部件中包装 TextField

Theme(
data: Theme.of(context).copyWith(accentColor: Colors.white), // set color here
child: TextField(),
)

最具体和最简单的回答最初的问题:

 Theme(
data: Theme.of(context).copyWith(primaryColor: Colors.blue),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Some Label'),
),
),

主颜色定义 OutlineInputBorder 小部件的边框颜色。只需用主题小部件包装 TextField 并覆盖主颜色即可。

这是上述问题的解决方案,如果用户没有单击 TextField,那么就使用 makes ledBorder; 如果用户单击 TextField,那么就使用 focus usedBorder。

 enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide:  BorderSide(color: Colors.pinkAccent ),


),
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide:  BorderSide(color: Colors.pinkAccent ),


),

您只需要在 InputDecoration 中给出“ ableledBorder”参数即可

enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
),