Image widget (asset, network) in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Image.asset widget in Flutter?

It displays an image stored locally in the app's assets folder. You must declare the image path in pubspec.yaml to use it.

beginner

How do you display an image from the internet in Flutter?

Use the Image.network widget and provide the image URL as a string.

intermediate

Why should you add a placeholder or error widget when using Image.network?

Because network images may take time to load or fail. Placeholders improve user experience by showing a temporary image or message.

intermediate

What is the role of the fit property in the Image widget?

It controls how the image fits inside its container, for example, BoxFit.cover fills the container while keeping aspect ratio.

beginner

How do you declare an image asset in Flutter's pubspec.yaml file?

Under the flutter: section, add assets: and list the image file path(s) relative to the project root.

Which widget is used to display a local image asset in Flutter?

A Image.asset

B Image.network

C Image.file

D Image.memory

Image.asset is for local assets. Image.network is for internet images.

What must you do before using an image asset in Flutter?

A Nothing special

B Upload it to a server

C Declare it in <code>pubspec.yaml</code>

D Convert it to base64

You must declare image assets in pubspec.yaml so Flutter includes them in the app bundle.

Which property controls how an image fits inside its container?

A alignment

B fit

C scale

D repeat

The fit property defines how the image scales and fits inside its box.

What happens if a network image fails to load in Flutter?

A An error widget can be shown if provided

B Nothing is shown by default

C The app crashes

D The image asset is shown instead

You can provide an error widget to show if the network image fails to load.

Which widget would you use to show an image from a URL?

A Image.memory

B Image.asset

C Image.file

D Image.network

Image.network loads images from the internet using a URL.

Explain how to display a local image asset in a Flutter app from start to finish.

Think about where the image lives and how Flutter knows about it.

Describe how to handle loading and error states when showing a network image in Flutter.

Consider user experience when internet is slow or unavailable.