Image widget (asset, network) in Flutter - Mini App: Build & Ship

Build: Image Display Screen

This screen shows two images: one loaded from app assets and one loaded from the internet.

Target UI

-------------------------
| Image Display Screen   |
|-----------------------|
| Asset Image:          |
| [Flutter Logo Image]  |
|                       |
| Network Image:        |
| [Online Picture]      |
|                       |
-------------------------

Display an image from app assets named 'flutter_logo.png'.

Display an image from a network URL below the asset image.

Both images should have a fixed height of 150 pixels and maintain aspect ratio.

Use a Column to arrange images vertically with some spacing.

Add a title text 'Asset Image:' above the asset image and 'Network Image:' above the network image.

Starter Code

Flutter

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Display Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add title text 'Asset Image:'
            // TODO: Add asset image here
            // TODO: Add spacing
            // TODO: Add title text 'Network Image:'
            // TODO: Add network image here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Display Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Asset Image:', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Image.asset('assets/flutter_logo.png', height: 150, fit: BoxFit.contain),
            const SizedBox(height: 20),
            const Text('Network Image:', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Image.network('https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup.png', height: 150, fit: BoxFit.contain),
          ],
        ),
      ),
    );
  }
}

We use a Column to arrange the widgets vertically. Each image is preceded by a Text widget as a label. The asset image is loaded using Image.asset with the path assets/flutter_logo.png. The network image is loaded using Image.network with the Flutter logo URL. Both images have a fixed height of 150 pixels and use BoxFit.contain to keep their aspect ratio without distortion. Spacing is added using SizedBox widgets for a clean layout.

Remember to add the asset image file flutter_logo.png to your project's assets folder and declare it in pubspec.yaml under flutter/assets.

Final Result

Completed Screen

-------------------------
| Image Display Screen   |
|-----------------------|
| Asset Image:          |
| [Flutter Logo Image]  |
|                       |
| Network Image:        |
| [Flutter Logo Online] |
|                       |
-------------------------

User sees the app bar with title 'Image Display Screen'.

User sees the label 'Asset Image:' and the Flutter logo loaded from app assets below it.

User sees the label 'Network Image:' and the Flutter logo loaded from the internet below it.

Images maintain their aspect ratio and have consistent height.

Stretch Goal

Add a placeholder widget that shows a CircularProgressIndicator while the network image is loading.

💡 Hint

Use the 'loadingBuilder' property of Image.network to show a spinner until the image loads.