iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Image

By · Reviewed & last updated · Part of Flutter Tutorial

Image displays images from network, assets, files, or memory. Image.network is the go-to; pair it with Image.asset for bundled images, CachedNetworkImage from cached_network_image for production.

Network, asset, fit, placeholder

EXAMPLE
import 'package:flutter/material.dart';

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

    @override
    Widget build(BuildContext context) {
        return ListView(children: [
            // 1) Network image
            Image.network(
                'https://picsum.photos/600/400',
                fit: BoxFit.cover,
                width: double.infinity,
                height: 200,
                loadingBuilder: (ctx, child, progress) {
                    if (progress == null) return child;
                    return const Center(child: CircularProgressIndicator());
                },
                errorBuilder: (ctx, error, st) =>
                    const Center(child: Icon(Icons.broken_image)),
            ),

            // 2) Asset image — declared in pubspec.yaml under flutter > assets
            Image.asset('assets/logo.png', width: 120),

            // 3) File from disk (e.g. after camera capture)
            // Image.file(File('/tmp/photo.jpg')),

            // 4) Memory (Uint8List from API or generated)
            // Image.memory(bytes),

            // 5) Common fit modes — what to do when image AR != container AR
            //   BoxFit.cover     — fill, crop
            //   BoxFit.contain   — fit, letterbox
            //   BoxFit.fill      — stretch
            //   BoxFit.fitWidth  — match width, AR preserved
            //   BoxFit.scaleDown — shrink only

            // 6) Rounded image
            ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: Image.network('https://picsum.photos/600/400', height: 200, fit: BoxFit.cover),
            ),

            // 7) Circular avatar
            const CircleAvatar(
                radius: 32,
                backgroundImage: NetworkImage('https://i.pravatar.cc/64'),
            ),

            // 8) Production-quality network image (use cached_network_image)
            // CachedNetworkImage(
            //     imageUrl: url,
            //     placeholder: (ctx, url) => const ShimmerBox(),
            //     errorWidget:  (ctx, url, _) => const Icon(Icons.error),
            //     fit: BoxFit.cover,
            // ),

            // 9) Hero animation — same image flies between routes
            Hero(
                tag: 'cover-${post.id}',
                child: Image.network(post.cover, fit: BoxFit.cover, height: 200),
            ),
        ]);
    }
}

Why it matters

For anything beyond a demo, use cached_network_image. It deduplicates fetches, persists to disk, gives you placeholders / error widgets, and respects HTTP cache headers — all for free.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
Image.network('https://picsum.photos/300')
// or
Image.asset('assets/logo.png')
Try it Yourself »

Discussion

Loading…