web-dev-qa-db-fra.com

Flutter couleur d'arrière-plan du champ de texte sur focus

J'ai un champ de texte arrondi. Cela fonctionne bien, mais lorsque l'utilisateur tape dessus, un arrière-plan de couleur grise apparaît. Comment puis-je désactiver cet effet d'éclaboussure?

Voici mon code et mon résultat:

        new Container(
          margin: const EdgeInsets.only(left: 30.0, top: 60.0, right: 
         30.0),
          height: 40.0,
          decoration: new BoxDecoration(

          color: Colors.white,

            borderRadius: new BorderRadius.all(new Radius.circular(25.7))
          ),

          child: new Directionality(

              textDirection: TextDirection.ltr,
              child: new TextField(
                controller: null,
                autofocus: false,

                style:
                    new TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
                decoration: new InputDecoration(
                  filled: true,

                  fillColor: Colors.white,
                  hintText: 'Username',
                  contentPadding: const EdgeInsets.only(
                      left: 14.0, bottom: 8.0, top: 8.0),
                  focusedBorder: OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.white),
                    borderRadius: new BorderRadius.circular(25.7),
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: new BorderSide(color: Colors.white),
                    borderRadius: new BorderRadius.circular(25.7),
                  ),
                ),
              ))),

code

androiddartflutter
20
hesam

Il semble que cela soit dû à l'effet d'éclaboussure sur le champ de texte. Je n'ai pas trouvé de moyen de le désactiver pour ce widget spécifique mais vous pouvez le rendre transparent en enveloppant votre TextField dans un widget Theme et en définissant le splashColor sur transparent:

Theme(
  data: Theme.of(context).copyWith(splashColor: Colors.transparent),
  child: TextField(
    autofocus: false,
    style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.white,
      hintText: 'Username',
      contentPadding:
          const EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
        borderRadius: BorderRadius.circular(25.7),
      ),
    ),
  ),
);
39
Jordan Davies