Flutter - InputDecoration border only when focused

Question

I am trying to Design a custom TextFormField and everything is working fine except that I only need to show a border when the TextFormField is focused (someone has tapped into it).

As I don't think that is possible I tried to change the color of the border, but it seems to me that this color can only be set through the hintColor of the theme. But as the hintColor also changes the color of the hint Text being displayed i can't use that.

final theme = Theme.of(context);

return new Theme(
  data: theme.copyWith(primaryColor: Colors.blue),
  child: TextFormField(
    autocorrect: false,
    style: TextStyle(color: Colors.green),
    decoration: new InputDecoration(
      fillColor: Colors.white,
      filled: true,
      contentPadding:
          EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
      labelText: title,
    ),
    validator: this.validator,
    onSaved: (String newValue) {
      setMethod(newValue);
    },
  ),
);

Does anyone have an idea how to solve this problem?

Answer 1

There is a property named focusedBorder, you can use and change it according to your needs, and also set the default border as InputBorder.none, example:

  @override
    Widget build(BuildContext context) {
      return TextFormField(
        autocorrect: false,
        focusNode: _focusNode,
        style: TextStyle(color: Colors.green),
        decoration: new InputDecoration(
          fillColor: Colors.white,
          border: InputBorder.none,
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              borderSide: BorderSide(color: Colors.blue)),
          filled: true,
          contentPadding:
              EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
          labelText: widget.title,
        ),
        validator: widget.validator,
        onSaved: (String newValue) {},
      );
    }

Update if you don't have the focusedBorder attribute

    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Center(
            child: Column(
          children: <Widget>[
            MyCustomTextField(
              title: "Testing 1",
            ),
            MyCustomTextField(
              title: "Testing 2",
            )
          ],
        ));
      }
    }

    class MyCustomTextField extends StatefulWidget {
      final String title;
      final ValueChanged<String> validator;

      MyCustomTextField({this.title, this.validator});

      @override
      _MyCustomTextFieldState createState() => _MyCustomTextFieldState();
    }

    class _MyCustomTextFieldState extends State<MyCustomTextField> {
      var _focusNode = new FocusNode();

      _focusListener() {
        setState(() {});
      }

      @override
      void initState() {
        _focusNode.addListener(_focusListener);
        super.initState();
      }

      @override
      void dispose() {
        _focusNode.removeListener(_focusListener);
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return TextFormField(
          autocorrect: false,
          focusNode: _focusNode,
          style: TextStyle(color: Colors.green),
          decoration: new InputDecoration(
            fillColor: Colors.white,
            border: _focusNode.hasFocus
                ? OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    borderSide: BorderSide(color: Colors.blue))
                : InputBorder.none,
            filled: true,
            contentPadding: EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
            labelText: widget.title,
          ),
          validator: widget.validator,
          onSaved: (String newValue) {},
        );
      }
    }