FutureBuilder with ListView in Flutter

This blog post is an example of displaying data from a FutureBuilder to a ListView widget in Flutter. The FutureBuilder widget allows you to build futuristic user interfaces that are responsive and performant.

ListView is a scrolling widget that allows us to create a scrollable list of items. In order to use the ListView widget, you need to have a collection of items to display. In this case, we’re going to use a FutureBuilder to get data from an API and display it in a ListView.

class PickingPage extends StatefulWidget {
  final StockPicking? picking;

  const PickingPage(this.picking, {Key? key}) : super(key: key);

  _PickingPageState createState() => _PickingPageState();

class _PickingPageState extends State<PickingPage> {

	Future<List<StockMove>?>? _futureStockMoves;

	void initState() {

		//fetch stock moves on loading
		_futureStockMoves = _fetchStockMoves();


	Future<List<StockMove>?> _fetchStockMoves() async {
		StockMoveResponse response =
		    await _odooStockMove.searchByIds(widget.picking!.move_lines!);
		return response.stockMoves!;

	Widget build(BuildContext context) {
		return FutureBuilder<List<StockMove>?>(
	future: _futureStockMoves,
	builder: (ctx, snapshot) {
		  if (snapshot.connectionState == ConnectionState.done) {
		    if (snapshot.hasError) {
		      return const ErrorText();
		    } else if (snapshot.hasData) {
		      final moves = snapshot.data as List<StockMove>;

		      return Column(
		        mainAxisAlignment: MainAxisAlignment.start,
		        crossAxisAlignment: CrossAxisAlignment.start,
		        children: [
		              mainAxisAlignment: MainAxisAlignment.start, 
		              children: [
		                  TextButton(onPressed: (){
		                    setState(() {

		                  }, child: const Text("Press Me", style:TextStyle(color: MyTheme.highlightColor),))
		          if (moves.isNotEmpty)
		                .map((item) => Text(item.name))
		            const Text('No product')

		  // Displaying LoadingSpinner to indicate waiting state
		  return CenterProgressIndicator();


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.