web-dev-qa-db-fra.com

Flutter - Bordure InputDecoration uniquement lorsqu'elle est mise au point

J'essaie de concevoir un TextFormField personnalisé et tout fonctionne bien sauf que je n'ai besoin d'afficher une bordure que lorsque le TextFormField est focalisé (quelqu'un y a accédé).

Comme je ne pense pas que ce soit possible, j'ai essayé de changer la couleur de la bordure, mais il me semble que cette couleur ne peut être définie que par le hintColor du thème. Mais comme le hintColor change également la couleur du conseil affiché, je ne peux pas l'utiliser.

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

Quelqu'un at-il une idée de la façon de résoudre ce problème?

dartflutterflutter-layout
4
BeatzCraft

Il existe une propriété nommée focusedBorder, vous pouvez l'utiliser et la modifier selon vos besoins, et définir également la bordure par défaut comme InputBorder.none, exemple:

  @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) {},
      );
    }

Mettre à jour si vous n'avez pas l'attribut focusBorder

    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) {},
        );
      }
    }
11
diegoveloper