I'm trying to match a set of custom user data to a class I created like so:

ListView.builder(
        physics: const BouncingScrollPhysics(),
        shrinkWrap: true,
        itemCount: recentCalls.length,
        itemBuilder: (context, int index) {
          return CallList(
            name: recentCalls[index].name,
            time: recentCalls[index].time,
            icon: recentCalls[index].icon,
            imageURL: recentCalls[index].imageURL,
          );
        },
      ),

This is supposed to be displayed on the UI but for some reason, I get this error message:

══════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'int'
The relevant error-causing widget was CallList

I am supposed to be able to be able to display the custom data on the screen to update the UI but it displays this error...

This is my CallList class:

class CallList extends StatefulWidget {
  const CallList({
    Key? key,
    required this.name,
    required this.time,
    required this.icon,
    required this.imageURL,
  }) : super(key: key);
  final String? name, time, imageURL;
  final IconData icon;

  @override
  _CallListState createState() => _CallListState();
}

class _CallListState extends State<CallList> {
  get index => null;

  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = Theme.of(context);
    return GestureDetector(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 16),
        child: Row(
          children: [
            Expanded(
              child: Row(
                children: [
                  CircleAvatar(
                    backgroundImage:
                        NetworkImage((recentCalls[index]).imageURL),
                    maxRadius: 30,
                  ),
                  Container(
                    color: Colors.transparent,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "${widget.name}",
                          style: themeData.textTheme.headline6!.copyWith(
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        addVertical(6),
                        Text(
                          "${widget.time}",
                          style: themeData.textTheme.bodyText1!.copyWith(
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Center(
                    child: Icon(
                      widget.icon,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Here I the list of calls:

List<UserCall> recentCalls = [
  UserCall(
    name: "Nathaniel",
    time: "08:00",
    imageURL: "https://randomuser.me/api/portraits/men/13.jpg",
    icon: Icons.call_received_outlined,
  ),
  UserCall(
    name: "Chris",
    time: "08:07",
    imageURL: "https://randomuser.me/api/portraits/men/13.jpg",
    icon: Icons.call_made_outlined,
  ),
  UserCall(
    name: "Samuel",
    time: "08:10",
    imageURL: "",
    icon: Icons.call_received_outlined,
  ),
  UserCall(
    name: "Damien",
    time: "08:50",
    imageURL: "",
    icon: Icons.call_made_outlined,
  ),
  UserCall(
    name: "Daniel",
    time: "10:00",
    imageURL: "",
    icon: Icons.call_received_outlined,
  ),
  UserCall(
    name: "Nathaniel",
    time: "11:47",
    imageURL: "https://randomuser.me/api/portraits/men/12.jpg",
    icon: Icons.call_made_outlined,
  ),
  UserCall(
    name: "Samuel",
    time: "13:00",
    imageURL: "",
    icon: Icons.call_made_outlined,
  ),
  UserCall(
    name: "Ritchie",
    time: "Yesterday",
    imageURL: "",
    icon: Icons.call_made_outlined,
  ),
  UserCall(
    name: "Jonathan",
    time: "Yesterday",
    imageURL: "",
    icon: Icons.call_received_outlined,
  ),
  UserCall(
    name: "Nathaniel",
    time: "2 days ago",
    imageURL: "https://randomuser.me/api/portraits/men/12.jpg",
    icon: Icons.call_received_outlined,
  ),
  UserCall(
    name: "Nathaniel",
    time: "08:00",
    imageURL: "https://randomuser.me/api/portraits/men/12.jpg",
    icon: Icons.call_made_outlined,
  ),
];

How can I work around this problem?

CodePudding user response：

In the CallList class the value for the index getter always returns a value of null, however a List index is always to be a value type of type int, this is why you get the error.

Change the code below

CircleAvatar(
                    backgroundImage:
                        NetworkImage((recentCalls[index]).imageURL),
                    maxRadius: 30,
                  ),

to

CircleAvatar(
                    backgroundImage:
                        NetworkImage(widget.imageURL),
                    maxRadius: 30,
                  ),

Essentially replace the index look up with the field imageURL as defined in the widget. The index lookup is happening in the ListView.builder and so its not needed in the CallListState class