Flutter - Using the future builder with infinite list view.

main.dart

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    var futureBuilder = new FutureBuilder(
      future: _getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
            return new Text('loading...');
          default:
            if (snapshot.hasError)
              return new Text('Error: ${snapshot.error}');
            else
              return createListView(context, snapshot);
        }
      },
    );

    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Home Page"),
      ),
      body: futureBuilder,
    );
  }

  Future<List<String>> _getData() async {
    var values = new List<String>();
    values.add("Horses");
    values.add("Goats");
    values.add("Chickens");

    //throw new Exception("Danger Will Robinson!!!");

    await new Future.delayed(new Duration(seconds: 5));

    return values;
  }

  Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
    List<String> values = snapshot.data;
    return new ListView.builder(
        itemCount: values.length,
        itemBuilder: (BuildContext context, int index) {
          return new Column(
            children: <Widget>[
              new ListTile(
                title: new Text(values[index]),
              ),
              new Divider(height: 2.0,),
            ],
          );
        },
    );
  }
}

The video that covers using this source.

https://www.youtube.com/watch?v=R2I0osLdjgQ&list=PLBbgqtDgdc_RUWUCInIqxpY--C94C6Xjh&index=32&t=0s

What the app does above:

A video for the AnimatedList would be great. Thnx

Great Job!

• How to make it real infinite view?
• how to trigger next data loading by scroll or by index condition?
• how to refresh by timer loading different data?
• how to setState() after added data or modified data, will it rebuild and rerender whole showing ListView?
  thanks

how i call _getData() again when return in snapshot.hasError ? thank you

https://marcinszalek.pl/flutter/infinite-dynamic-listview/

What if I want to add this into a column with a row that has some buttons in it? I keep getting render errors that no size is set and all kinds of other garbage print outs from my debug console.

Hi there,

I tried this code and looks fine, but I did not get the data at the first load. I mean, when I call the widget with this code, it does nothing. But if I click on the hot reload button on Android Studio it loads the data. So, I think that there is something missing for me, because I got the impression that the futureBuilder does not triggers the first time it loads the first State of the StatefulWidget. I'm loading data from a WebService with http library. This load is working fine. Also, the text of "loading..." does not appears, only when I click on hot reload button...

What a shit here. That does not work.
I get "EXCEPTION CAUGHT BY RENDERING LIBRARY" constantly ejected and nothing is displayed.
Why is faulty code being presented on the internet? Idiot. Make it clean first and then show people something!

if there is no data
then display error

thanks, the column helping me out. great example

I had the same problem with sizing to infinite, maybe using an expanded widget on ListView.builder or add shrinkwrap functions in ListView.builder will help you out, or both of it.