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

由于设置为屏幕的默认主题，这不会改变。

因此，只要用 新主题数据()包装 TextField，就可以为正在绘制的小部件更改它们

child: new Theme(
data: new ThemeData(
primaryColor: Colors.redAccent,
primaryColorDark: Colors.red,
),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(
Icons.person,
color: Colors.green,
),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
),
));

改变 primaryColor和 primaryColorDark颜色的代码不会改变边框的初始颜色，只有在点击颜色保持黑色之后

必须更改的属性是 hintColor

BorderSide不应该用于此，您需要更改主题。

要使红色默认为将主题放在 MaterialApp(theme: ...)中，并更改特定小部件的主题，例如将默认的红色更改为小部件的黄色，需要在小部件的周围使用:

new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: ...
)

下面是代码和 gif:

注意，如果我们将 primaryColor颜色定义为黑色，那么通过点击小部件，就会选择黑色

但是要更改小部件中的标签和文本，我们需要将主题设置为 InputDecorationTheme

以黄色开头的小部件有自己的主题，以红色开头的小部件有用函数 buildTheme()定义的默认主题

import 'package:flutter/material.dart';


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


ThemeData buildTheme() {
final ThemeData base = ThemeData();
return base.copyWith(
hintColor: Colors.red,
primaryColor: Colors.black,
inputDecorationTheme: InputDecorationTheme(
hintStyle: TextStyle(
color: Colors.blue,
),
labelStyle: TextStyle(
color: Colors.green,
),
),
);
}


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: buildTheme(),
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(),
body: new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new ListView(
children: <Widget>[
new InkWell(
onTap: () {},
child: new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
),
new InkWell(
onTap: () {},
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)
),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
],
),
)
);
}
}

新的方法是这样使用 enabledBorder:

new TextField(
decoration: new InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.grey, width: 0.0),
),
focusedBorder: ...
border: ...
),
)

我真不知道为什么边框的颜色不对。但是您可以使用文本字段的其他边框属性来控制边框颜色。他们是:

1. 禁用边界: 在启用时被激活，设置为 false
2. 岛屿边界: 激活时，启用被设置为真(默认情况下，TextField 的启用属性为真)
3. ErrorBorder: 在出现错误时被激活(例如，验证失败)
4. 当我们单击/聚焦于 TextField 时激活。
5. 当出现错误时激活，我们当前关注的是那个 TextField。

下面给出了一个代码片段:

TextField(
enabled: false, // to trigger disabledBorder
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFF2F2F2),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.red),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.orange),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.green),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,)
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.black)
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
),
hintText: "HintText",
hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
errorText: snapshot.error,
),
controller: _passwordController,
onChanged: _authenticationFormBloc.onPasswordChanged,
obscureText: false,
),

边界:

边界:

边界:

错误边界:

聚焦边界:

希望能帮到你。

enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.red)
),

1. 在你的自由党档案里

2. 创建一个名为 colors的文件夹。

3. 在 colors文件夹中创建一个 dart 文件并将其命名为 color。

4. 把这个代码粘贴进去

   const MaterialColor primaryOrange = MaterialColor(
   _orangePrimaryValue,
   <int, Color>{
   50: Color(0xFFFF9480),
   100: Color(0xFFFF9480),
   200: Color(0xFFFF9480),
   300: Color(0xFFFF9480),
   400: Color(0xFFFF9480),
   500: Color(0xFFFF9480),
   600: Color(0xFFFF9480),
   700: Color(0xFFFF9480),
   800: Color(0xFFFF9480),
   900: Color(0xFFFF9480),
   },
   );
   const int _orangePrimaryValue = 0xFFFF9480;
   

5. Go to your main.dart file and place this code in your theme

   theme:ThemeData(
   primarySwatch: primaryOrange,
   ),
   

6. Import the color folder in your main.dart like this import 'colors/colors.dart';

最好和最有效的解决方案是在你的主类中添加主题，并像这样添加输入装饰。

theme: ThemeData(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.pink)
)
),
)

我们已经用粘贴的代码片段尝试了自定义搜索框。这个代码对于 Flutter 所有类型的 ABc0装饰都很有用。希望这个片段对其他人有所帮助。

Container(
margin: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
child:  new Theme(
data: new ThemeData(
hintColor: Colors.white,
primaryColor: Colors.white,
primaryColorDark: Colors.white,
),
child:Padding(
padding: EdgeInsets.all(10.0),
child: TextField(
style: TextStyle(color: Colors.white),
onChanged: (value) {
filterSearchResults(value);
},
controller: editingController,
decoration: InputDecoration(
labelText: "Search",
hintText: "Search",
prefixIcon: Icon(Icons.search,color: Colors.white,),
enabled: true,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(25.0))),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 0.0),
borderRadius: BorderRadius.all(Radius.circular(25.0)))),
),
),
),
),

Padding(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
child: TextField(
cursorColor: Color.fromRGBO(25, 118, 218, 1),
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide:
new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
),
focusedBorder: new OutlineInputBorder(
borderSide:
new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
),
labelText: "Edit Phone",
labelStyle: TextStyle(
color: Colors.grey,
),
prefixIcon: const Icon(
Icons.phone_outlined,
color: Color.fromRGBO(25, 118, 218, 1),
),
),
),
),

回头再谢我

您可以将此代码用于底部工作表以及普通文本字段:

class TextFieldForDropDown extends StatelessWidget {
final String title;
final String hintText;
final TextEditingController textEditingController;
bool isPassword;
final Function onTap;
final bool enable;
TextFieldForDropDown({this.title, this.hintText, this.textEditingController, this.isPassword = false, this.onTap, this.enable});
@override
Widget build(BuildContext context) {
    

var titleTextStyle = TextStyle(
color: Color(0xff9098C8),
fontSize: 12,
fontWeight: FontWeight.w400,
fontFamily: "Muli",
);
    

var textFieldTextStyle = TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: "Muli",
);
    

var borderSides = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xff38406B)));
var borderSides1 = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff)));
    

return InkWell(
onTap: onTap,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(this.title, style: titleTextStyle),
SizedBox(height: 8),
TextFormField(
enabled: enable,
// onTap: onTap,
obscureText: isPassword,
style: textFieldTextStyle,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
hintText: this.hintText,
hintStyle: titleTextStyle,
border: textEditingController.text != "" ? borderSides1 :borderSides,
enabledBorder:  textEditingController.text != "" ? borderSides1 :borderSides,
disabledBorder: textEditingController.text != "" ? borderSides1 :borderSides,
focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff))),
),
controller: textEditingController,
)
],
),
),
);
}
}

像这样使用:

TextFieldForDropDown(
title: 'Phone Number*',
hintText: '+123-22-223-00',
textEditingController: viewModel.phoneController,
),

TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
borderSide: BorderSide(width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueGrey),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.redAccent),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.orangeAccent),
),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
contentPadding: EdgeInsets.all(10.0),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(
Icons.person,
color: Colors.green,
),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green),
),
),

border: OutlineInputBorder(borderSide: BorderSide(color: CustomColors.primaryColor),),