Image Widget Tutorial Using Dart in Flutter

Learn how to use the Image widget in Dart for your Flutter apps. The Image widget is essential when displaying assets, network images, or even memory images. In this tutorial, you’ll get a clear explanation of how to use various types of images in Flutter using Dart programming.

Why Use the Image Widget?

The Image widget in Flutter supports:

• Asset images
• Network images
• File images
• Memory images
• Placeholder images (with loading indicators)

You can display static images or integrate them dynamically based on user interaction or fetched data.

mporting Flutter Image Widget

To start using the Image widget, make sure you import flutter/material.dart.

Add Image to pubspec.yaml

Before using asset images, don’t forget to register the asset in your pubspec.yaml:

flutter:
  assets:
    - assets/images/sample.jpg

Complete Code Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Widget Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Image Widget Tutorial')),
        body: SingleChildScrollView(
          child: Column(
            children: [
              // Load from assets
              Image.asset('assets/images/sample.jpg'),

              // Load from network
              Image.network(
                'https://flutter.dev/images/flutter-logo-sharing.png',
                loadingBuilder: (context, child, loadingProgress) {
                  if (loadingProgress == null) return child;
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                },
              ),

              // Load from memory (as an example)
              // Uint8List bytes = yourImageBytes;
              // Image.memory(bytes),

              // Load with fixed dimensions and fit
              Image.asset(
                'assets/images/sample.jpg',
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

You can explore more types and use cases of Flutter’s image widget from the Flutter documentation.