What is Image Widget in Flutter: Simple Explanation and Example

The Image widget in Flutter is used to display images in your app's user interface. It supports loading images from various sources like assets, network URLs, or files, making it easy to show pictures in your app.

How It Works

The Image widget acts like a picture frame in your app. You give it a source, such as a file on your device, an image bundled with your app, or a web address, and it shows that picture on the screen. Just like hanging a photo on a wall, the widget takes care of loading and displaying the image for you.

Behind the scenes, Flutter fetches the image data asynchronously, so your app stays smooth and responsive. You can also customize how the image fits or fills the space, similar to choosing how a photo fits inside a frame.

Example

This example shows how to display an image from the internet using the Image.network constructor. It loads and shows the picture inside a simple app.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Image Widget Example')),
        body: Center(
          child: Image.network(
            'https://flutter.dev/assets/homepage/carousel/slide_1-bg-4e2fcef3e6a2a7e3a7f9f7a9f7a9f7a9f7a9f7a9f7a9f7a9f7a9f7a9f7a9f7a9.png',
            width: 300,
            height: 200,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

Output

A Flutter app screen with an app bar titled 'Image Widget Example' and a centered image loaded from the internet, sized 300x200 pixels, filling the space with cropping if needed.

When to Use

Use the Image widget whenever you want to show pictures in your Flutter app. This includes logos, photos, icons, or any visual content. It works well for profile pictures, backgrounds, product images, or decorative graphics.

For example, if you build a shopping app, you can use Image widgets to show product photos loaded from the web or bundled with the app. If you want to display user avatars, you can load images from files or network URLs.

Key Points

• The Image widget displays images from assets, network, or files.
• It loads images asynchronously to keep the app smooth.
• You can control how the image fits its space using properties like fit.
• Common constructors include Image.asset, Image.network, and Image.file.

Key Takeaways

The Image widget shows pictures in Flutter apps from various sources.

Use Image.network to load images from the internet easily.

Customize image display with properties like width, height, and fit.

Image loading is asynchronous, so it doesn't block the app UI.

Use Image.asset for bundled images and Image.file for local files.