Images are one of the most important parts of the applications whether they are Android, IOS or web. Image widget in Flutter provides us with lots of features and in this tutorial, we are going to learn to load an image from the link in Flutter.

Contents

• Image.network

• NetworkImage

Image.network

Image widget allows us to directly load an image from a given URL. We can provide the options that we get from the Image widget as well. It displays an ImageStream obtained from the URL. Image.network is a widget and we can directly place it in the widget tree. We don't need to wrap it under any other widget.

Syntax

The syntax for the Image.network is as follows:

Image.network(src),

Example

Here we have an image from a given URL and we are going to load it using the Image.network.

String imageUrl =
    "https://i.pinimg.com/564x/2d/1d/0c/2d1d0c17ecb30e266f2aaa29da8566a7.jpg";

Then place the Image.network widget with the URL.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.network(imageUrl),
    const Text("All About Flutter Logo")
  ],
),

Here is the full code.

class NetworkImageTutorial extends StatefulWidget {
  const NetworkImageTutorial({Key? key}) : super(key: key);

  @override
  State<NetworkImageTutorial> createState() => _NetworkImageTutorialState();
}

class _NetworkImageTutorialState extends State<NetworkImageTutorial> {
  String imageUrl =
      "https://i.pinimg.com/564x/2d/1d/0c/2d1d0c17ecb30e266f2aaa29da8566a7.jpg";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Network Image Tutorial"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Image.network(imageUrl),
            const Text("All About Flutter Logo")
          ],
        ),
      ),
    );
  }
}

NetworkImage

NetworkImage is a class that fetches images from a given URL with a scale associated with it. The image is cached regardless of the cache headers from the server

Syntax

To use the NetworkImage, we first need a URL from where this class fetches and caches the image data. Then we wrap it under the image widget. Here is the basic syntax.

Image(
  image: NetworkImage(imageUrl),
)

Example

We have first created a TextField where the user will enter the image URL. The TextField will set the imageURL string variable whenever the URL is changed.

String variable

String imageUrl = "";

TextField

Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextField(
    onChanged: (value) => setState(
      () {
        imageUrl = value;
      },
    ),
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
    ),
  ),
),

Finally, we have created the Image widget with the NetworkImage. We have also created a custom error builder that returns a Text widget displaying a message that the URL is not an image URL.

Image(
  image: NetworkImage(imageUrl),
  errorBuilder: (context, object, stacktrace) =>
      const Text("No Image URL"),
)

Now place the widgets under the Column widget.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        onChanged: (value) => setState(
          () {
            imageUrl = value;
          },
        ),
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
      ),
    ),
    Image(
      image: NetworkImage(imageUrl),
      errorBuilder: (context, object, stacktrace) =>
          const Text("No Image URL"),
    )
  ],
)

Output

Here is the full code.

class NetworkImageTutorial extends StatefulWidget {
  const NetworkImageTutorial({Key? key}) : super(key: key);

  @override
  State<NetworkImageTutorial> createState() => _NetworkImageTutorialState();
}

class _NetworkImageTutorialState extends State<NetworkImageTutorial> {
  String imageUrl = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Network Image Tutorial"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                onChanged: (value) => setState(
                  () {
                    imageUrl = value;
                  },
                ),
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
              ),
            ),
            Image(
              image: NetworkImage(imageUrl),
              errorBuilder: (context, object, stacktrace) =>
                  const Text("No Image URL"),
            )
          ],
        ),
      ),
    );
  }
}

If you have any doubts, write below in the comments.