Image widget (asset, network) in Flutter

Introduction

Images make apps look nice and help users understand content better. The Image widget shows pictures from files or the internet.

Show a logo stored inside your app files.

Display a user's profile picture from a website.

Add background pictures to screens.

Show product photos loaded from online stores.

Syntax

Flutter

Image.asset('path/to/image.png')

Image.network('https://example.com/image.png')

Image.asset loads images bundled inside your app.

Image.network loads images from the internet using a URL.

Examples

Loads a local image named logo.png from the assets folder.

Flutter

Image.asset('assets/logo.png')

Loads the Flutter logo from the web.

Flutter

Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

Loads a local photo and sets its size to 100x100 pixels.

Flutter

Image.asset('assets/photo.jpg', width: 100, height: 100)

Loads an online image and crops it to cover the space.

Flutter

Image.network('https://example.com/pic.jpg', fit: BoxFit.cover)

Sample App

This app shows two images stacked vertically: one local asset image and one from the internet. Both images are 150 pixels wide and centered on the screen.

Flutter

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: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/flutter.png', width: 150),
              const SizedBox(height: 20),
              Image.network('https://flutter.dev/images/flutter-logo-sharing.png', width: 150),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Make sure to add local images to your pubspec.yaml under assets: to use Image.asset.

Network images need internet access and may take time to load; consider showing a placeholder or loading spinner.

You can control image size with width and height properties.

Summary

The Image widget displays pictures in Flutter apps.

Use Image.asset for local files bundled with your app.

Use Image.network to load images from the internet.