Flutter: Display an array of strings from JSON in Futurebuilder containing a Listview

Question

I have a JSON and I have no problem displaying just Strings but my problem is arrays of strings. I have a Future function that takes data from the JSON and then display that in a futurebuilder.

So to be clear I want the usernames: "hugo" and "studentone" to be displayed in a listview.builder!

If someone can tell be how to do the Future Function that would help loads!

The JSON:

    {
    "id": 81,
    "users": [
        {
            "username": "hugo",
            "fullname": "Hugo Johnsson"
        },
        {
            "username": "studentone",
            "fullname": "Student One"
        }
    ],
    "title": "test med teacher chat",
    "description": "This project does not have a description.",
    "subject": "No subject",
    "deadline": "2019-01-06",
    "days_left": "91 days ago",
    "overview_requests": [
        {
            "id": 28,
            "user": {
                "username": "hugo",
                "fullname": "Hugo Johnsson"
            },
            "group": 81
        }
    ]
},

The Future Function: Future> _getUSERS() async {

var data = await http.get("IP");
var jsonData = json.decode(data.body); 

List<USER> users;

for (var JData in jsonData) {

  var jsonUsers = JData["users"];

  for(int i = 0; i<users.length ; i++) {
    var user = jsonUsers[i];
    users.add(USER(user["username"], user["fullname"]));
  }
}

The UI:

child: FutureBuilder(
      future: _getUSERS(),
      builder: (BuildContext context, AsyncSnapshot snapshot ) {
        if (snapshot.data == null){
          return Container(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }
        else return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(snapshot.data[index].username),
            );
          }
        );
      }
    ),

Answer 1

There are bugs in the future function that fetches the json data.

I have corrected and here it is:

Future<List<USER>> _getUSERS() async {

var data = await http.get("IP");
var jsonData = json.decode(data.body); 

List<USER> users;

for (var JData in jsonData) {

  var jsonUsers = JData["users"];

  for(int i = 0; i<jsonUsers.length ; i++) {
    var user = jsonUsers[i];
    users.add(USER(user["username"], user["fullname"]));
  }
}
return users;

fixes:

1. for(int i = 0; i< jsonUsers .length; i++)
2. return users;

Answer 2

This is something which I have done. You can take a reference from this

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_list_http/MyApp1.dart';
import 'package:flutter_list_http/XYZ.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:fluttertoast/fluttertoast.dart';

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

XYZ parsePosts(String responseBody) {

  var myClass = XYZ.fromJson(jsonDecode(responseBody));
  for (var result in myClass.data.toList()) {
    print('result');
    print(result?.id);
  }
  return myClass;
}

Future<XYZ> fetchPosts(http.Client client) async {
  final response = await client.get(
      'url',
      headers: {
        "Authorization":
           "headers if any"
      });
  print(response.body);
  // compute function to run parsePosts in a separate isolate
  return compute(parsePosts, response.body);
}

class HomePage extends StatelessWidget {
  final String title;

  HomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: FutureBuilder<XYZ>(
        future: fetchPosts(http.Client()),
        builder: (context, snapshot) {
          if (snapshot.hasError) print(snapshot.error);

          return snapshot.hasData
              ? ListViewPosts(posts: snapshot.data)
              : Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

class ListViewPosts extends StatelessWidget {
  final XYZ posts;

  ListViewPosts({Key key, this.posts}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
          itemCount: posts.data.length,
          padding: const EdgeInsets.all(15.0),
          itemBuilder: (context, position) {
            return Column(
              children: <Widget>[
                Divider(height: 5.0),
                ListTile(
                  title: Text(
                    '${posts.data[position].name}',
                    style: TextStyle(
                      fontSize: 22.0,
                      color: Colors.deepOrangeAccent,
                    ),
                  ),
                  onTap: () => _onTapItem(context, posts, position),
                ),
              ],
            );
          }),
    );
  }

  void _onTapItem(BuildContext context, XYZ posts, int position) {

    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => MyApp1()),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'JavaSampleApproach HTTP-JSON';

    return MaterialApp(
      title: appTitle,
      home: HomePage(title: appTitle),
    );
  }
}

Hope it helps.