Flutter 更改 TextEditController 上的 ListView 以进行搜索

Question

in the flutter code below I have to implement the search for the articles present in the list. How do I make sure that when I change the TextEditController the listview is updated, the articles are loaded directly from a rest call on a node.js backend the articles are displayed however all I want to do is filter it with the TextEditController.

Dart Code:

//Lista che contiene la lista degli articoli
List<Articolo> foods;
//Lista che contiene la lista delle categorie
List<Categoria> categories;
//Descrizione: funzione che esegue l'init dei valore della view
Future<bool> init() async {
  categories = await Categoria.caricamentoCategorie();
  foods = await Articolo.caricamento();
  return true;
}
class SearchScreen extends StatefulWidget {
  @override
  _SearchScreenState createState() => _SearchScreenState();
}
class _SearchScreenState extends State<SearchScreen>
    with AutomaticKeepAliveClientMixin<SearchScreen> {
  TextEditingController _searchControl = new TextEditingController();
  
  @override
  void initState() {
    super.initState();
  }
  
  _SearchScreenState(){
   BackButtonInterceptor.add(myInterceptor);
  }
  //Disabilito il bottone di back su android
  bool myInterceptor(bool stopDefaultButtonEvent, RouteInfo info) {
    return true;
  }
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
        future: init(),
        builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
          if (!snapshot.hasData) {
            return new Container();
          } else {
            super.build(context);
            return Padding(
              padding: EdgeInsets.fromLTRB(10.0, 0, 10.0, 0),
              child: ListView(
                children: <Widget>[
                  SizedBox(height: 10.0),
                  Card(
                    elevation: 6.0,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(
                          Radius.circular(5.0),
                        ),
                      ),
                      child: TextField(
                        style: TextStyle(
                          fontSize: 15.0,
                          color: Colors.black,
                        ),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.all(10.0),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5.0),
                            borderSide: BorderSide(
                              color: Colors.white,
                            ),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Colors.white,
                            ),
                            borderRadius: BorderRadius.circular(5.0),
                          ),
                          hintText: "Ricerca..",
                          suffixIcon: Icon(
                            Icons.search,
                            color: Colors.black,
                          ),
                          hintStyle: TextStyle(
                            fontSize: 15.0,
                            color: Colors.black,
                          ),
                        ),
                        maxLines: 1,
                        controller: _searchControl,
                      ),
                    ),
                  ),
                  SizedBox(height: 5.0),
                  Padding(
                    padding: EdgeInsets.all(20.0),
                    child: Text(
                      "Articoli",
                      style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                 
                  ListView.builder(
                    shrinkWrap: true,
                    primary: false,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: foods == null ? 0 : foods.length,
                    itemBuilder: (BuildContext context, int index) {
                      Articolo food = foods[index];
                      return ListTile(
                        title: Text(
                          food.getCodArt(),
                          style: TextStyle(
                        
                            fontWeight: FontWeight.w900,
                          ),
                        ),
                        leading: ClipRRect(
                  borderRadius: BorderRadius.circular(8.0),
                  child:  Image.network(
        food.getPathImmagine(),
        fit: BoxFit.cover,
        width: 100,
        height:100
    ),
                ),
                        trailing: Text(""),
                        subtitle: Row(
                          children: <Widget>[
                            
                            Text(
                              "Prezzo: "+food.getPrezzo(),
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                        onTap: () {
                          var view=new ProductDetails(food); 
                          Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => view));
                          
                        },
                      );
                    },
                  ),
                  SizedBox(height: 30),
                ],
              ),
            );
          }
        });
  }
  @override
  bool get wantKeepAlive => true;
}

Answer 1

You can do something like this. Make your Future a variable that you can set when a user types something. The search() method should be similar to your init() method, where it calls the service but with filtered results.

class _MyWidgetState extends State<MyWidget> {

  Future myFuture;

  @override
  void initState() {
    super.initState();

    myFuture = init();

    // Start listening to changes.
    _searchControl.addListener(_printLatestValue);
  }
 
  @override
  void dispose() {
       super.dispose();
       //don't forget to remove the listener to stop memory leaks
       _searchControl.removeListener(_onTextChanged);
 }

  _printLatestValue() {
     myFuture = search(_searchControl.text); //this will return your new future with your filtered list
     setState(() {  }); // this refreshes the view
  }

  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
       future: myFuture, ... //this is a variable now instead of a direct method call

}

Answer 2

The first way is to listen directly by making a textcontroller listener. In the second way, didChangeDependencies function dart special function runs the function you want to execute when something is changed instantly.

Options 1:

 final _controller = TextEditingController();

 @override
 void initState() {
  super.initState();
  _controller.addListener(_onTextChanged);
 }

 @override
  void dispose() {
   super.dispose();
  _controller.removeListener(_onTextChanged);
  }

 void _onTextChanged() {
    search();

  }

---

Options 2:

 final _controller = TextEditingController();
     VoidCallback _listener;

     @override
     void didChangeDependencies() {
     super.didChangeDependencies();

   if (_listener == null) {
    _listener = () {
      _search(_controller.text));
    };
   _controller.addListener(_listener);
 }
}

 @override
  void dispose() {
  super.dispose();
 _controller.removeListener(_listener);
 }