Error “The getter 'url' was called on null.” What am I doing wrong here?

Question

1. This is my model for services.

'''
class ServiceItem {  

final String id;
  final String serviceName;
  final String url;

  ServiceItem({this.id, this.serviceName, this.url});
}

List<ServiceItem> items = [
  ServiceItem(
    id: '1',
    serviceName: 'Shopping Bag',
    url: "./assets/img/shopping_bag.png",
  ),
  ServiceItem(
    id: '2',
    serviceName: 'Order Lists',
    url: "./assets/img/order.png",
  ),
  ServiceItem(
      id: '3',
      serviceName: 'Everyday Subscription',
      url: "./assets/img/everyday.png"),
  ServiceItem(
    id: '4',
    serviceName: 'Handyman',
    url: "./assets/img/handyman.png",
  ),
];

'''

2. Instantiated the model class on the Page.

'''
ServiceItem _serviceItem;
'''

3. Calling the properties in the Widgets.

'''
Image(image: AssetImage(_serviceItem.url[index])),
Text(_serviceItem.serviceName[index]),
'''

4. Getting Error "The getter 'url' was called on null." and Getting Error "The getter 'serviceName' was called on null." and

What Am I doing wrong here? Thanks for your help in advance.

Answer 1

Try

Image(image: AssetImage(items[index].url)),
Text(items[index].serviceName),

OR

_serviceItem=items[index];
Image(image: AssetImage(_serviceItem.url)),
Text(_serviceItem.serviceName),