How to handle Null image error in url using flutter

Question

I have the below error:

======== Exception caught by image resource service ================================================
The following ArgumentError was thrown resolving an image codec:
Invalid argument(s): No host specified in URI file:///null

When the exception was thrown, this was the stack: 
#0      _HttpClient._openUrl (dart:_http/http_impl.dart:2425:9)
#1      _HttpClient.getUrl (dart:_http/http_impl.dart:2346:48)
#2      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:89:59)
#3      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:50:14)
#4      ImageProvider.resolveStreamForKey.<anonymous closure> (package:flutter/src/painting/image_provider.dart:503:13)
...
Image provider: NetworkImage("null", scale: 1.0)
Image key: NetworkImage("null", scale: 1.0)

that's because the image URL is null so I tried to handle this by using the below code:

image: DecorationImage(
              image: NetworkImage(
                '${article['urlToImage']}'.isNotEmpty
                    ? '${article['urlToImage']}'
                    : FlutterLogo(),
              ),
              fit: BoxFit.cover,
            ),

But I still finds the same error...

Here's the full code I have:

import 'package:flutter/material.dart';

Widget buildArticleItem(article) {
  return Padding(
    padding: const EdgeInsets.all(20.0),
    child: Row(
      children: [
        Container(
          width: 120,
          height: 120,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(
              10.0,
            ),
            image: DecorationImage(
              image: NetworkImage(
                '${article['urlToImage']}'.isNotEmpty
                    ? '${article['urlToImage']}'
                    : FlutterLogo(),
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(
          width: 20.0,
        ),
        Expanded(
          child: Container(
            height: 120.0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Expanded(
                  child: Text(
                    '${article['title']}',
                    style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w400,
                    ),
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Text(
                  '${article['publishedAt']}',
                  style: TextStyle(
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

to be clear the image url object is called with null as the below one:

and of course there's others images with non null and it works fine.

Answer 1

Move the logic outside network image.

image: article['urlToImage'] != null
                ? DecorationImage(
                    image: NetworkImage(article['urlToImage']),
                    fit: BoxFit.cover,
                  )
                : DecorationImage(
                    image: NetworkImage(
                        'urlImage'),
                  ),
              

Answer 2

You can create a function with a try catch block that will return an Image widget.

Widget _getImage(dynamic article) {
  NetworkImage _image;
  try {
    _image = NetworkImage(
                '${article['urlToImage']}'.isNotEmpty
                    ? '${article['urlToImage']}'
                    : FlutterLogo(),
              );
  } catch (e) {
    debugPrint(e); // to see what the error was
    _image = NetworkImage("some default URI");
  }
}

And then, simply in put the function instead of placing a widget.

image: _getImage(article)