Image widget (asset, network) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this Flutter code display?

Consider this Flutter code snippet that uses the Image widget to load an image from assets. What will the app show on the screen?

Flutter

Image.asset('assets/images/picture.png')

A A loading spinner until the image downloads from the internet.

B A blank screen because Image.asset requires a network URL.

C The image located at assets/images/picture.png will be displayed.

D An error because the image path is incorrect without a full URL.

💡 Hint

Think about where Image.asset loads images from and if it needs internet.

Image.asset loads images bundled inside the app package, so it shows the local image immediately if the path is correct.

❓ ui_behavior

intermediate

What happens if the network image URL is invalid?

This Flutter code tries to load an image from the internet. What will the user see if the URL is wrong or the server is down?

Flutter

Image.network('https://example.com/invalid-image.jpg')

A The app shows the last cached image from that URL.

B The app crashes with a network error.

C The app shows a default placeholder image automatically.

D A broken image icon or empty space where the image should be.

💡 Hint

Think about what Flutter does when it cannot load a network image.

If the network image fails to load, Flutter shows an empty box or broken image icon by default unless a placeholder is provided.

❓ lifecycle

advanced

How does Flutter cache network images by default?

When you use Image.network in Flutter, how does the framework handle caching of the downloaded images?

A Flutter caches images only in memory but not on disk.

B Flutter does not cache network images; it downloads every time.

C Flutter caches images in memory and disk automatically for faster reloads.

D Flutter caches images only if you use a special caching package.

💡 Hint

Think about how apps avoid re-downloading images repeatedly.

Flutter's Image.network uses the underlying image provider which caches images only in memory but not on disk.

📝 Syntax

advanced

Which code correctly loads a local asset image with a fixed size?

Choose the Flutter code snippet that loads an asset image and sets its width to 100 pixels and height to 50 pixels.

A Image.asset('assets/pic.png').size(100, 50)

B Image.asset('assets/pic.png', width: 100, height: 50)

C Image.asset('assets/pic.png', size: Size(100, 50))

D Image.asset('assets/pic.png', width=100, height=50)

💡 Hint

Check the correct parameter names and syntax for Image.asset sizing.

Image.asset accepts width and height named parameters to set image size. Other options use invalid syntax or methods.

🔧 Debug

expert

Why does this Image.network code cause a runtime error?

Analyze this Flutter code snippet and find why it throws an error at runtime.

Flutter

Image.network(null)

A It throws a runtime error because the URL cannot be null.

B It shows a blank image because null is treated as empty string.

C It loads a default placeholder image automatically.

D It compiles but crashes later due to missing internet permission.

💡 Hint

Think about what happens if you pass null where a string URL is expected.

Image.network requires a non-null string URL. Passing null causes a runtime error.

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