在Flutter中更改TextField的下划线

Question

我正在使用Flutter SDK开发应用程序.当我使用TextField小部件时,我将其聚焦,下划线变为蓝色.我需要将此颜色更改为红色,我该怎么办？

我需要改变的截图.我只想更改下划线,而不是标签颜色.

Answer 1

您还可以通过以下方式更改其颜色。

1. 环绕你TextField在Theme和提供accentColor

   Theme(
     data: Theme.of(context).copyWith(accentColor: Colors.red),
     child: TextField(),
   )
   

2. 使用inputDecoration财产。

   TextField(
     decoration: InputDecoration(
       focusedBorder: UnderlineInputBorder(
         borderSide: BorderSide(color: Colors.red),
       ),
     ),
   )
   

Answer 2

虽然这些其他答案可能以某种方式起作用,但您绝对不应该使用它.这不是在Flutter中获得自定义主题的正确方法.

一个更优雅的解决方案如下:

final theme = Theme.of(context);

return new Theme(
  data: theme.copyWith(primaryColor: Colors.red),
  child: new TextField(
    decoration: new InputDecoration(
      labelText: "Hello",
      labelStyle: theme.textTheme.caption.copyWith(color: theme.primaryColor),
    ),
  ),
);

同时,如果你只是想显示错误(红色),使用errorText的InputDecoration替代.它会自动将颜色设置为红色.

Answer 3

我已使用InputDecoration.collapsed删除分隔线，并且正在更改底部边框的颜色。

如果输入名称，则底部边框颜色为蓝色，如果输入数字或其他特殊字符，则底部边框颜色为红色

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const EdgeInsets _padding = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0);
  Color borderColor = Colors.blue;
  bool nameFlag = false;

  @override
  void initState() {
    super.initState();
  }

  void validateName(String value) {
    final RegExp nameExp = new RegExp(r'^[A-Za-z ]+$');
    if (!nameExp.hasMatch(value) || value.isEmpty)
      borderColor = Colors.red;
    else
      borderColor = Colors.blue;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(children: <Widget>[
        new Flexible(
          child: new Container(
            margin: _padding,
            padding: _padding,
            child: new TextField(
              decoration: new InputDecoration.collapsed(
                hintText: "Enter Name",
              ),
              onChanged: (s) {
                setState(() => validateName(s));
              },
            ),
            decoration: new BoxDecoration(
              color: Colors.white,
              border: new Border(
                bottom: new BorderSide(color: borderColor, style: BorderStyle.solid),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

让我知道这是否回答了您的问题:)