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.