Flutter List.Builder fetch JSON

Question

This is my code:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<User> _users = <User>[];
  List<User> _usersDisplay = <User>[];

  @override
  void initState() {
    super.initState();
    fetchUsers().then((value){
      _users.addAll(value);
      _usersDisplay = _users;
      print(_usersDisplay.length);
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Users List'),
      ),
      body: SafeArea(
        child: Container(
          child: ListView.builder(
            itemBuilder: (context, index) {
              if (_usersDisplay.length > 0){
                return UserTile(user: this._usersDisplay[index]);
              }else{
                return LoadingView();
              }
            },
            itemCount: _usersDisplay.length + 1,
          ),
        ),
      ),
    );
  }
}

While executing initStae() it prints _usersDisplay.length as 100 but only return LoadingView(). It not shows UserTile().

When checking _usersDisplay.length inside of build it is always 0. Why?

Also I cannot define List as this way: List<User> _users = List<User>();

score 2 · Answer 1 · answered Aug 21 '21 at 10:05

Use Future Builder for JSON & List

FutureBuilder(
  builder: (context, snapshot) {

    // WHILE THE CALL IS BEING MADE AKA LOADING
    if (ConnectionState.active != null && !snapshot.hasData) {
      return Center(child: Text('Loading'));
    }

    // WHEN THE CALL IS DONE BUT HAPPENS TO HAVE AN ERROR
    if (ConnectionState.done != null && snapshot.hasError) {
      return Center(child: Text(snapshot.error));
    }

    // IF IT WORKS IT GOES HERE!
    return ListView.builder(
      itemCount: snapshot.data.length,
      itemBuilder: (context, index) {
        return Text(snapshot.data[index].toString());
      },
    );
  },
  future: getAllTodos(),
),

How can I use Filtering or searching options when using Future Builder — Akila Ishan, Aug 21 '21 at 10:42
Fetched data will be there in the Snapshot variable. You can access the snapshot as "snapshot.data" like list. Then, you can do whatever you want with that data. — Dc7, Aug 21 '21 at 10:55

score 1 · Accepted Answer · answered Aug 21 '21 at 10:11

1

change

fetchUsers().then((value){
      _users.addAll(value);
      _usersDisplay = _users;
      print(_usersDisplay.length);
    });

to

fetchUsers().then((value){
      _users.addAll(value);
      _usersDisplay = _users;
      print(_usersDisplay.length);
      setState(() {})
});

answered Aug 21 '21 at 10:11

Mathiew Abbas

823
1
8
17

If you get data from API refer my answer [here](https://stackoverflow.com/a/68709502/13997210) or [here](https://stackoverflow.com/a/68533647/13997210) or [here](https://stackoverflow.com/a/68594656/13997210) hope it's helpful to you in this answers I have used Futur and FutureBuilder for geting the data – Ravindra S. Patil Aug 21 '21 at 11:35

Flutter List.Builder fetch JSON

2 Answers2