Flutter - TextField auto complete suggestions from SQLite

Question

I am trying to create an autocomplete TextField. This one is working when I used the below hardcoded List.

List<String> suggestions = [
    "Apple", 
    "Actual",
    "Actuary",
    "America",
    "Argentina",
  ];

But when I used to get data from SQLite and filter it's not filtering. Not working. The SQLite list also getting the same format as the above one. But it's not calling to itemFilter part. Please help. I am new to flutter.

static Future<List<String>> selectItems() async {
var db = await _openDB();
final usersData = await db.query("albums");
return usersData.map((Map<String, dynamic> row) {
  return row["albumname"] as String;
}).toList();}


  List<String> itemsList;

  void selectItems() async {
    itemsList =  await DBManager.selectItems();
  }

This is text filed Code

  Container(
              width: _width * 2,
              height: 50,
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: AutoCompleteTextField(
                controller: txtAlbumSuggest,
                suggestions: itemsList,
                clearOnSubmit: false,
                style: TextStyle(color: Colors.black,fontSize: 15),
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20.5)
                    )
                ),
               itemFilter: (item,query){
               return item.toLowerCase().startsWith(query.toLowerCase());
               },
                itemSorter: (a,b){
                  return a.compareTo(b);
                },
                itemSubmitted: (item){
                  txtAlbumSuggest.text=item;
                },
                itemBuilder: (context,item){
                  return Container(
                      padding: EdgeInsets.all(20.0),
                    child: Row(
                      children: <Widget>[
                        Text(
                          item,
                          style: TextStyle(color: Colors.black),
                        )
                      ],
                    ),

                  );

                },
              ), 
            ),

Solution

Assuming that this code is within your DBManager class:

static Future<List<String>> selectItems() async {
 var db = await _openDB();
 final usersData = await db.query("albums");
 return usersData.map((Map<String, dynamic> row) {
   return row["albumname"] as String;
 }).toList();
}

You should use setState() to update the state of your Widget class:

  List<String> _itemsList;

  void _loadItems() async {
    setState(() => _itemsList =  await DBManager.selectItems());
  }

Otherwise, your Container won't get notified of the asynchronous update of the data.

Also, it's important to call _loadItems(), in the Widget class, immediately after the layout has been loaded, to make sure that the data is fetched:

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _loadItems(context));
  }

Follows the full example code:

void main() {
  runApp(MaterialApp(home: HomeScreen(), title: 'Flutter Example'));
}

class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  List<String> _itemsList;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _loadItems(context));
  }

  void _loadItems() async {
    setState(() => _itemsList = await DBManager.selectItems());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: _width * 2,
          height: 50,
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child: AutoCompleteTextField(
            controller: txtAlbumSuggest,
            suggestions: _itemsList,
            clearOnSubmit: false,
            style: TextStyle(color: Colors.black, fontSize: 15),
            decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20.5))),
            itemFilter: (item, query) {
              return item.toLowerCase().startsWith(query.toLowerCase());
            },
            itemSorter: (a, b) {
              return a.compareTo(b);
            },
            itemSubmitted: (item) {
              txtAlbumSuggest.text = item;
            },
            itemBuilder: (context, item) {
              return Container(
                padding: EdgeInsets.all(20.0),
                child: Row(
                  children: <Widget>[
                    Text(
                      item,
                      style: TextStyle(color: Colors.black),
                    )
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Comments

[Abhishek Ghaskata]

void selectItems() async rename this method and you may need setstate.