1
votes

Flutter TextField avec IconButton

J'ai deux problèmes avec ce widget. Lors de l'ajout du suffixe : IconButton ... , il ajoute ce qui ressemble à un remplissage à l'intérieur du champ de texte. Et comment puis-je afficher l'icône du suffixe lorsque _searchController.text n'est pas vide. J'ai essayé _searchController.text! = Null? IconButton (...): 'ne sais pas quoi renvoyer ici'

  Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search),
        suffix: IconButton(
          icon: Icon(Icons.clear),
          onPressed: () => _searchController.clear(),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }

Avec suffixe:

Sans suffixe:

flutter

0 commentaires

3 Réponses :

1
votes

essayez:

Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search,color: Colors.white,),

        suffix: InkWell(

          child: Icon(Icons.clear),
          onPressed: () => _searchController.clear(),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }

0 commentaires

7
votes

Utilisez plutôt suffixIcon. Pour mettre à jour l'icône en fonction de l'état, vous devez appeler setState quelque part.

Essayez ceci:

import 'package:flutter/material.dart';

class SearchWidget extends StatefulWidget {


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

class _SearchWidgetState extends State<SearchWidget> {
  String _searchText = "";
  TextEditingController _searchController;
  @override
  Widget build(BuildContext context) {
      return TextField(
        controller: _searchController,
        decoration: InputDecoration(
          labelText: "Search",
          hintText: "Search",
          prefixIcon: Icon(Icons.search,color: Colors.white,),

          suffixIcon: _searchText.isNotEmpty ? IconButton(icon: Icon(Icons.clear),onPressed: () {
            setState(() {
              _searchController.clear();
            });},) : null,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
          ),
        ),
      );
    }

  @override
  void initState() {
    super.initState();
    _searchController = TextEditingController();
    _searchController.addListener(() {
      setState(() {
        _searchText = _searchController.text;
      });
    });
  }

  @override
  void dispose() {
      _searchController.dispose();
      super.dispose();
  }
}

Modifier: n'oubliez pas de supprimer

2 commentaires

appeler setState () à l'intérieur du contrôleur d'écoute fera que tous les widgets à l'intérieur de la construction seront rafraîchis. Sans elle, l'icône claire ne sera pas mise à jour lorsque le texte est saisi. Saviez-vous qu'un moyen de mettre à jour uniquement les TextFiled qui ont changé?

Je ne suis pas sûr, mais selon ce que je comprends, la création d'un widget séparé pour le champ de texte avec des icônes peut aider. Parce que de cette façon, ce widget serait reconstruit et non les autres widgets.

6
votes

J'ai fini par utiliser les idées des deux réponses. L'un n'a pas expliqué comment afficher et masquer l'icône tandis que l'autre semblait un peu trop compliqué. Tout ce que j'ai fait, c'est _searchController.text.isEmpty

  Widget _searchBox() {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        labelText: "Search",
        hintText: "Search",
        prefixIcon: Icon(Icons.search),
        suffixIcon: _searchController.text.isEmpty
            ? null
            : InkWell(
                onTap: () => _searchController.clear(),
                child: Icon(Icons.clear),
              ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
        ),
      ),
    );
  }

1 commentaires

Vous pouvez utiliser IconButton à la place d'InkWell: il a une icône, et une action, c'est plus simple et plus adapté à ce travail;)