How do I get the network image in flutter?

How do you get the network image in Flutter?

It’s easy. We’ll see that in a minute.

However, displaying image in a proper way needs our attention.

Similarly, we need to know the context. In a book application we may have many categories.

Clicking any category takes you to the detail page.

But, how can we make it possible?

On the other hand, besides navigation, we need to design the display page.

Why?

Because we want to show images.

Moreover, the Flutter image class has many properties.

We can serve images as application assets. Similarly, we can have them directly from Internet.

Here comes the network property of Flutter image class.

How do I add an image to flutter?

In a previous article we’ve seen how to handle GridView to show many categories on the screen.

Therefore we’re not repeating the code anymore. Besides, one can have the full code snippet in the related GitHub repository.

For example, we have a first page and a second page. The first page shows the categories. And the second page shows the detail.

As a result, we start from main file like the following:

import 'package:flutter/material.dart';

import 'package:list_map_revisit/book_app/view/first_page.dart';

void main() {
runApp(FirstPage());
}

Next, we have the first page where we use material route.

import 'package:flutter/material.dart';
import 'package:list_map_revisit/book_app/controller/all_categories.dart';

import 'package:list_map_revisit/book_app/model/dummy_categories.dart';
import 'package:list_map_revisit/book_app/view/second_page.dart';

class FirstPage extends StatelessWidget {
const FirstPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Routing test',
debugShowCheckedModeBanner: false,
initialRoute: '/',
routes: {
'/': (context) => FirstPageBody(),
'/categories': (context) => SecondPage(),
},
);
}
}

We’ve organized our codes in three separate folders. Most importantly, we’re following MVC approach.

Here the display page becomes significant. As we want to show image using network property.

What is network image in flutter?

Images are coming from Internet. It is no longer a local asset.

Meanwhile, we use Image class network method like the following.

Although the above image has no connection with the title, however it serves our purpose.

If we scroll down a little bit, we get another image.

The same way!

Consequently we can view the part of the source code. It’s a long code snippet.

Therefore, for brevity, we use the relevant portion.

body: ListView.builder(
itemBuilder: (context, index) {
return Column(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.all(10.0),
padding: EdgeInsets.all(10.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
child: Image.network(categoryBooks[index].imageURL),
),
)
],
),

// the code is incomplete, please visit GitHub repository for full code

The image URL property that we’ve passed through the constructor has come from a dummy data.

That resides in our model folder.

For instance, we can have an idea.

const DUMMY_BOOKS = const [
  Books(
    id: 'b1',
    categories: ['c1', 'c4'],
    title: 'PHP and Laravel',
    detail: '''Richard McClintock, a Latin professor at Hampden-Sydney 
    College in Virginia, looked up one of the more obscure Latin words, 
    consectetur, from a Lorem Ipsum passage, and going through the cites
     of the word in classical literature, discovered the undoubtable source.
      Lorem Ipsum comes from sections 1.10.32 and 1.10.33 
      of "de Finibus Bonorum et Malorum" 
      (The Extremes of Good and Evil) by Cicero, written in 45 BC. 
      This book is a treatise on the theory of ethics, 
      very popular during the Renaissance. The first line of Lorem Ipsum,
       "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.''',
    imageURL:
        'https://sanjibsinha.com/wp-content/uploads/2021/07/Can-you-code-in-WordPress-How-do-I-learn-WordPress-coding-.jpg',
  ),

In fact, we have received the image from this website. Watch the image URL property.

What Next?

Books at Leanpub
Books in Apress
My books at Amazon
GitHub repository
Technical blog
Twitter