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

我正在尝试使用

BorderSide

更改我的

TextField

的边框颜色，但它不起作用

下面是我的代码

新建文本字段(
装饰：新的输入装饰(
边框：新大纲输入边框(
borderSide:新的borderSide（颜色：Colors.teal）
),
hintText:‘告诉我们你自己的情况’，
helperText:“保持简短，这只是一个演示。”，
labelText:“生活故事”，
前缀：常量图标（Icons.person，颜色：Colors.green，），
前缀：“”，
后缀：“USD”，
后缀样式：常量文本样式（颜色：Colors.green）），
)
)

结果的屏幕截图如下所示

---

由于屏幕上设置了默认主题，因此不会更改

因此，只需使用新主题数据（）包装文本字段，即可更改正在绘制的小部件的文本字段。

---

更改

primaryColor

和

primaryColorDark

颜色的代码不会更改边框的特定颜色，只有在点击“颜色保持黑色”后才会更改

必须更改的属性是

hintColor

BorderSide

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

要使红色成为默认颜色，将主题放入

MaterialApp（主题：…）

中，并更改特定小部件的主题，例如将小部件的默认红色更改为黄色，请在小部件周围使用：

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

以下是代码和gif：

请注意，如果我们将

primaryColor

颜色定义为黑色，则通过点击小部件，它将被选择为黑色

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

InputDecorationTheme

以黄色开头的小部件有自己的主题，以红色开头的小部件有使用函数

buildTheme（）

导入“包装：颤振/材料.省道”；
void main（）=>runApp（新的MyApp（））；
主题数据构建主题（）{
最终主题数据基=主题数据（）；
返回base.copyWith(
hintColor:Colors.red，
原色：颜色。黑色，
inputDecorationTheme:inputDecorationTheme(
hintStyle:TextStyle(
颜色：颜色，蓝色，
),
标签样式：文本样式(
颜色：颜色。绿色，
),
),
);
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
主题：buildTheme（），
主页：新主页（），
);
}
}
类主页扩展了StatefulWidget{
@凌驾
_HomePageState createState（）=>new_HomePageState（）；
}
类_HomePageState扩展状态{
字符串xp='0'；
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar:新的appBar（），
主体：新容器(
填充：仅限新边缘组（顶部：16.0），
子：新列表视图(
儿童：[
新墨水池(
onTap:（）{}，
儿童：新主题(
数据：新主题数据(
颜色：颜色。黄色
),
孩子：新文本字段(
装饰：新的输入装饰(
边框：新大纲输入边框（），
hintText:‘告诉我们你自己的情况’，
helperText:“保持简短，这只是一个演示。”，
labelText:“生活故事”，
前缀：常量图标（Icons.person，颜色：Colors.green，），
前缀：“”，
后缀：“USD”，
后缀样式：常量文本样式（颜色：Colors.green）），
)
)
),
新墨水池(
onTap:（）{}，
孩子：新文本字段(
装饰：新的输入装饰(
边框：新大纲输入边框(
borderSide:新的borderSide（颜色：Colors.teal）
),
hintText:‘告诉我们你自己的情况’，
helperText:“保持简短，这只是一个演示。”，
labelText:“生活故事”，
前缀：常量图标（Icons.person，颜色：Colors.green，），
前缀：“”，
后缀：“USD”，
后缀样式：常量文本样式（颜色：Colors.green）），
)
)
],
),
)
);
}
}

执行此操作的新方法是像这样使用

enabledBorder

：

新建文本字段(
装饰：新的输入装饰(
enabledBorder:const OutlineInputBorder(
borderSide:const borderSide（颜色：Colors.grey，宽度：0.0），
),
聚焦顺序：。。。
边界：。。。
),
)

嗯，我真的不知道为什么指定给边框的颜色不起作用。但您可以使用textfield的其他边框属性来控制边框颜色。它们是：

disabledBorder:在enabled设置为false时激活

enabledBorder:在enabled设置为true时激活（默认情况下，TextField的enabled属性为true）

errorBorder：在出现错误（即验证失败）时激活

focusedBorder:在单击/聚焦文本字段时激活

focusedErrorBorder：在出现错误时激活，我们当前关注该文本字段

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

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：

焦点顺序：

错误边界：

ErrorFocusedOrder:

希望对你有帮助

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

在lib文件中

创建一个名为

colors

的文件夹

在

colors

文件夹中创建一个dart文件，并将其命名为

color

将此代码粘贴到其中

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;

导入

ma中的
color
文件夹
enabledBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(10.0),
  borderSide: BorderSide(color: Colors.red)
),

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;

theme:ThemeData(
    primarySwatch: primaryOrange,
),

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

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),
  ),
),