CODEWITHSUNDEEP
fluttermobiledart
Asri
Asri

Reputation: 325

Listview not dynamically updating with TextField

currently I am trying to update a ListView using a TextField but I encountered problems. The ListView initially update correctly upon initialization but the moment when I type something, it goes blank.

This is my code:

class TabbarViewWidget extends StatefulWidget {
  TabbarViewWidget({this.selectedList});

  final List<String> selectedList;

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

class _TabbarViewWidgetState extends State<TabbarViewWidget> {
  TextEditingController textController = TextEditingController();

  var items = List<String>();

  void filteredSearch(String query) {
    List<String> dummySearchList = List();
    dummySearchList.addAll(widget.selectedList);
    if (query.isNotEmpty) {
      List<String> dummyListData = List();
      dummySearchList.forEach((item) {
        if (item.contains(query)) {
          dummyListData.add(query);
        }
      });
      setState(() {
        items.clear();
        items.addAll(dummyListData);
      });
      return;
    } else {
      setState(() {
        items.clear();
        items.addAll(widget.selectedList);
      });
    }
  }

  @override
  void initState() {
    items = widget.selectedList;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(15.0),
          child: TextField(
            onChanged: (value) {
              filteredSearch(value.toUpperCase());
            },
            controller: textController,
            decoration: InputDecoration(
                hintText: "Search",
                labelText: "Search",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                  Radius.circular(25.0),
                ))),
          ),
        ),
        Expanded(
            child: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('${items[index]}'),
                  );
                })),
      ],
    );
  }
}

Much Help Needed! I am a self taught Flutter enthusiast so I may not know lots of stuff. Please bear with me!

Upvotes: 3

Views: 453

Answers (1)

dubace
dubace

Reputation: 1621

Somehow (i didn't dig why) your list in widget.selectedList was cleared in method filteredSearch.

I changed your code a little bit and it works:

List items = List<String>();

  void filteredSearch(String query) {
    items = widget.selectedList.where((txt) => query.isEmpty || txt.contains(query)).toList();
    setState(() {
    });
  }

  @override
  void initState() {
    items = widget.selectedList;
    super.initState();
  }

Upvotes: 3

Related Questions