Flutter Image

Flutter Image widget displays an image in our Flutter Application.

In this tutorial, we will learn how to display an image using Image widget.

Code Snippet

A quick code snippet to display an image using Image class is

const Image(
  image: NetworkImage('https://www.tutorialkart.com/img/lion.jpg'),

In the above code, we are fetching the image from network, therefore, we have provided NetworkImage (ImageProvider object) to image property.



In the following example, we display an image using Image class.


import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Tutorial';

  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),

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

  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          children: <Widget>[
            margin: const EdgeInsets.all(20),
            child: const Image(
              image: NetworkImage(

Screenshot – iPhone Simulator

iPhone - Flutter Image Widget Tutorial

Screenshot – Android Emulator

Android - Flutter Image Widget Tutorial


In this Flutter Tutorial, we learned what an Image widget is, and how to set its properties to affect the look of the Image, with examples and tutorials.