How can type Null is not a subtype of type int be solved?

Question

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 {
  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: [
                        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 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?

user_11385546 · Answer

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

How can type Null is not a subtype of type int be solved?

1 Answers