Couleur d'arrière-plan du champ de texte Flutter sur la mise au point

Question

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

Voici mon code et 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),
                  ),
                ),
              ))),

Answer 1

Il semble que cela soit causé par 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 Theme et en définissant le splashColor à 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),
      ),
    ),
  ),
);

Answer 2

utilisez BorderSide.none comme:

 border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10.0),
    borderSide: BorderSide.none,
),

Answer 3

Pour ce faire, vous devez définir filled sur true .

 TextField(decoration: InputDecoration( fillColor: Colors.red, filled: true)),