Flutter - Textfield Auto Complete Suggestions From Sqlite

I am trying to create an autocomplete TextField. This one is working when I used the below hardcoded List. List suggestions = [ 'Apple', 'Actual', 'Actua

Solution 1:

Assuming that this code is within your DBManager class:

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

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

List<String> _itemsList;

  void_loadItems() async {
    setState(() => _itemsList =  awaitDBManager.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:

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

Follows the full example code:

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

classHomeScreenextendsStatefulWidget {
  HomeScreen({Key key}) : super(key: key);

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

class_HomeScreenStateextendsState<HomeScreen> {
  List<String> _itemsList;

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

  void_loadItems() async {
    setState(() => _itemsList = awaitDBManager.selectItems());
  }

  @overrideWidgetbuild(BuildContext context) {
    returnScaffold(
      body: Center(
        child: Container(
          width: _width * 2,
          height: 50,
          padding: constEdgeInsets.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) {
              returnContainer(
                padding: EdgeInsets.all(20.0),
                child: Row(
                  children: <Widget>[
                    Text(
                      item,
                      style: TextStyle(color: Colors.black),
                    )
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}