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.

Practice

1. Which Flutter widget is used to display an image stored locally inside your app's assets folder?

easy

A. Image.asset

B. Image.network

C. Image.file

D. Image.memory

Solution

1. Step 1: Understand image sources in Flutter

   Flutter provides different constructors for Image widget depending on the source: asset, network, file, or memory.

2. Step 2: Identify the correct constructor for local assets

   Images bundled with the app are accessed using Image.asset.

3. Final Answer:

   Image.asset -> Option A

4. Quick Check:

   Local image = Image.asset [OK]

Hint: Local images use Image.asset constructor [OK]

Common Mistakes:

• Using Image.network for local files
• Confusing Image.file with assets
• Not adding assets to pubspec.yaml

2. Which of the following is the correct syntax to load an image from the internet in Flutter?

easy

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

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

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

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

Solution

1. Step 1: Identify the correct constructor for network images

   To load images from the internet, Flutter uses Image.network with the URL as a string parameter.

2. Step 2: Check syntax correctness

   The syntax Image.network('https://example.com/image.png') is correct and will load the image from the URL.

3. Final Answer:

   Image.network('https://example.com/image.png') -> Option B

4. Quick Check:

   Network image = Image.network [OK]

Hint: Use Image.network for URLs [OK]

Common Mistakes:

• Using Image.asset for URLs
• Passing URL to Image.file
• Missing quotes around URL string

3. What will be displayed when this Flutter code runs?

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

Assuming the image file exists and is declared in pubspec.yaml.

medium

A. An error because 'images/logo.png' is a network URL

B. A blank space because Image.asset cannot load images

C. The image 'logo.png' from the assets folder is shown

D. A loading spinner while the image downloads

Solution

1. Step 1: Confirm asset image usage

   The code uses Image.asset with a relative path 'images/logo.png', which means it loads a local asset image.

2. Step 2: Check conditions for display

   Since the image exists and is declared in pubspec.yaml, Flutter will display the image correctly.

3. Final Answer:

   The image 'logo.png' from the assets folder is shown -> Option C

4. Quick Check:

   Image.asset with valid asset = image shown [OK]

Hint: Image.asset shows local images if declared properly [OK]

Common Mistakes:

• Confusing asset path with network URL
• Not declaring asset in pubspec.yaml
• Expecting loading spinner for local images

4. Identify the error in this Flutter code snippet:

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

medium

A. Using Image.asset with a network URL causes an error

B. Missing semicolon at the end

C. Image.asset requires a File object, not a string

D. The URL string is missing quotes

Solution

1. Step 1: Understand Image.asset usage

   Image.asset is for local asset files, not URLs.

2. Step 2: Identify misuse of URL with Image.asset

   Passing a network URL string to Image.asset causes a runtime error because it expects a local asset path.

3. Final Answer:

   Using Image.asset with a network URL causes an error -> Option A

4. Quick Check:

   Image.asset + URL = error [OK]

Hint: Image.asset only accepts local paths, not URLs [OK]

Common Mistakes:

• Thinking Image.asset works with URLs
• Ignoring asset declaration in pubspec.yaml
• Confusing Image.file with Image.asset

5. You want to display a local image named 'icon.png' stored in 'assets/icons/' folder and also show a fallback network image if the local image fails to load. Which Flutter code snippet correctly implements this?

hard

A. Image.file('assets/icons/icon.png', onError: () => Image.network('https://example.com/fallback.png'))

B. Image.network('assets/icons/icon.png', fallback: Image.asset('https://example.com/fallback.png'))

C. Image.asset('assets/icons/icon.png', fallbackImage: Image.network('https://example.com/fallback.png'))

D. Image.asset('assets/icons/icon.png', errorBuilder: (context, error, stackTrace) => Image.network('https://example.com/fallback.png'))

Solution

1. Step 1: Understand fallback handling in Image.asset

   Flutter's Image.asset supports an errorBuilder callback to handle loading errors and show alternative widgets.

2. Step 2: Check which option uses errorBuilder correctly

   Image.asset('assets/icons/icon.png', errorBuilder: (context, error, stackTrace) => Image.network('https://example.com/fallback.png')) uses errorBuilder to show a network image if the asset fails, which is the correct approach.

3. Final Answer:

   Image.asset with errorBuilder showing Image.network fallback -> Option D

4. Quick Check:

   Use errorBuilder for fallback images [OK]

Hint: Use errorBuilder in Image.asset for fallback images [OK]

Common Mistakes:

• Using fallback or onError props that don't exist
• Passing URLs to Image.asset directly
• Confusing Image.file with asset images