Hello Developers,

Showing images is an essential part of almost every app. In this lesson, we will learn how to show an image in a flutter project. There are two types of images. One is an asset image and another is a network image. Asset images are stored in the app itself. Usually, these images can be found in a folder called ‘assets’ in the project directory. On the other hand, network images are stored on the internet. We can load and show an image from the internet. For Asset images we use Asset.Image and for network images we use Network.Image.

Flutter App Installation

Open the android studio and create a fresh Flutter project like below:

Give a name like test_app in the android studio.

Assets And Network Permissions Added

For asset images, we need to address the asset folder in pubspec.yaml.

flutter:               
  assets:     
      - assets/images/

For the Network image, we need to add internet permission in the manifest file in android.

<uses-permission android:name="android.permission.INTERNET"/>

Use Image.Asset() In The View Page

Let's create a HomeView class and add the below code:

import 'package:flutter/material.dart';

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

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HOME'),
        centerTitle: true,
      ),
      body: Image.asset(
          'assets/logo.png',
        height: 300,
        width: 300,
        fit: BoxFit.contain,
      ),
    );
  }

For using the network image, you can use the below code:

import 'package:flutter/material.dart';

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

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HOME'),
        centerTitle: true,
      ),
      body: Image.network(
          'https://i.pinimg.com/564x/f8/66/7d/f8667d050eaf48b37d30c4710379355b.jpg',
        height: 300,
        width: 300,
        fit: BoxFit.contain,
      ),
    );
  }

If we run the code the output will look like the below image:

Hope this tutorial might help in the journey of your development

Read More: How to Send Firebase Push Notification in Flutter Using Laravel