Listview builder is constantly giving me null

Question

I have this:

class HonPage extends StatefulWidget {
  final Status? status;

  HonPage({Key? key, this.status}) : super(key: key);

  @override
  _HonPageState createState() {
    return _HonPageState();
  }
}

class _HonPageState extends State<HonPage> {

  @override
  void initState() {
    super.initState();
  }


  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return new ListTile(
            title: new Text("${widget.status.title ?? ""}"),
          );
        }
    );
  }
}

My result:

NULL
NULL
NULL
NULL
NULL
NULL
NULL
NULL
NULL
NULL

Whatever I do, I seem not to be able to fetch the items from JSON.

The JSON and API URL works on all other screens, so that can not be wrong. What am I doing wrong here? It's just that I have created a new tab and want to show the information.

Edit: In Status.dart, I have this:

Status(Map<String, dynamic> json) : super(json) {
    status = json["status"];
    title = json["title"];
    ....
}

JSON:

[{"title": "NAME ME", "status": "publish"}]

It seems we are missing a lot of context here. JSON? Fetch Items? None of that is in your code... — nvoigt, Nov 01 '21 at 12:43
What you're showing us has nothing to do with the problem you're having. The NULL values come from ${widget.status.title}, so show us how you're getting the data, where's status.title coming from — Yasine Romdhane, Nov 01 '21 at 12:47
You still have not posted a line that indicates "widget.status.title" should *not* be null. — nvoigt, Nov 01 '21 at 12:50
I think your JSON should be `[{"title": "NAME ME", "status": "publish"}]`. An array of JSON objects. — Roslan Amir, Nov 01 '21 at 13:13

Roslan Amir · Accepted Answer · 2022-11-13T10:27:02.457

2

You should use FutureBuilder when building a ListView to show results from an API call:

Widget _buildBody(BuildContext context) {
  return FutureBuilder<List<Status>>(
    future: fetchStatus(), // async API call that returns List<Status>
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasError) {
        return const Text("some error");
      }
      if (snapshot.connectionState != ConnectionState.done) {
        return const Center(child: CircularProgressIndicator());
      }
      if (!snapshot.hasData) {
        return const Text("some error");
      }
      final list = snapshot.data as List<Status>;
      return ListView.builder(
        itemCount: list.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('${list[index].title ?? ""}'),
          );
        },
      );
    },
  );
}

Updated:

You have to create the following class:

class Status {
  final String title;
  final String status;

  const Status({
    this.title = '',
    this.status = '',
  });

  factory Status.fromJson(Map<String, dynamic> json) => Status(
      title: json['title'] as String? ?? '',
      status: json['status'] as String? ?? '',
    );

  Map<String, dynamic> toJson() => <String, dynamic>{
      'title': title,
      'status': status,
    };
}

You have to write the method fetchStatus to call the API and return List<Status>.

Updated 2

return ListTile(
  title: Text('${list[index].title ?? ""}'),
  onTap: () {
    Navigator.pushNamed(
      context,
      '/detail_page',
      arguments: list[index],
    );
  },
);

edited Nov 13 '22 at 10:27

answered Nov 01 '21 at 13:03

Roslan Amir

1,141
8
16

Hmm, I don't get it. It's giving me errors on snapshot and Error: 'Status' isn't a type. final list = snapshot.data as List; ^^^^^^ lib/src/views/sfa.dart:44:15: Error: The method 'fetchStatus' isn't defined for the class – Johan Nov 01 '21 at 13:27
I have updated the answer above to include sample for the `Status` data class but you have to provide the method `fetchStatus` yourself. It should return `Future>`. – Roslan Amir Nov 02 '21 at 05:29
Roslan, where do I put the URL of my API? – Johan Nov 06 '21 at 14:26
See my answer to this: https://stackoverflow.com/questions/69832046/how-to-call-rapid-api-and-show-in-the-flutter-application/69834832?noredirect=1#comment123492030_69834832. See class `APIService`. – Roslan Amir Nov 06 '21 at 14:29
Clear. What about going to the detail page of the post? https://stackoverflow.com/questions/69800298/how-to-get-to-the-detail-page-of-my-posts-flutter-rest – Johan Nov 06 '21 at 14:30
On the `ListTile`, add the `onTap` argument. This is a function where you can use the Navigator to push to the `DetailPage` passing in `list[index]` as the `argument`. – Roslan Amir Nov 06 '21 at 14:41
I did. onTap: () { widget.handleOpenPlace!(places![index]); }, - however this does not do anything :( – Johan Nov 06 '21 at 14:42
See my latest update. You have to use `Navigator.push` or `Navigator.pushNamed`. See the link I gave above on how to create the detail page using Navigator. – Roslan Amir Nov 06 '21 at 14:46
Pushnamed is when you have a URL (like detail_page) to state? I don't have that. I have the use handleOpenPlace. And assuming list = places for me? – Johan Nov 06 '21 at 14:49
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238934/discussion-between-roslan-amir-and-johan). – Roslan Amir Nov 06 '21 at 14:49

Listview builder is constantly giving me null

1 Answers1