Image widget (asset, network) in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display an image from assets using the Image widget.

Flutter

Image.[1]('assets/picture.png')

Drag options to blanks, or click blank then click option'

Afile

Basset

Cmemory

Dnetwork

Attempts:

3 left

💡 Hint

Common Mistakes

Using Image.network for local assets causes errors.

Forgetting to add the image path in pubspec.yaml.

Use Image.asset to load images bundled with your app.

2fill in blank

medium

Complete the code to display an image from the internet using the Image widget.

Flutter

Image.[1]('https://example.com/image.png')

Drag options to blanks, or click blank then click option'

Anetwork

Basset

Cfile

Dmemory

Attempts:

3 left

💡 Hint

Common Mistakes

Using Image.asset for URLs causes runtime errors.

Not having internet permission in AndroidManifest.xml (Android).

Use Image.network to load images from a web URL.

3fill in blank

hard

Fix the error in the code to correctly load an asset image.

Flutter

Image.[1]('images/photo.png')

Drag options to blanks, or click blank then click option'

Aasset

Bnetwork

Cfile

Dmemory

Attempts:

3 left

💡 Hint

Common Mistakes

Using Image.network for local images.

Not adding the asset path in pubspec.yaml.

The image is local, so Image.asset is the correct constructor.

4fill in blank

hard

Fill both blanks to create an Image widget that loads a network image with a fixed width.

Flutter

Image.[1]('https://picsum.photos/200', width: [2])

Drag options to blanks, or click blank then click option'

Anetwork

Basset

C100.0

D200.0

Attempts:

3 left

💡 Hint

Common Mistakes

Using Image.asset for URLs.

Setting width as an integer without decimal.

Use Image.network for internet images and set width as a double value like 100.0.

5fill in blank

hard

Fill all three blanks to create an Image widget that loads an asset image with height and fit properties.

Flutter

Image.[1]('assets/logo.png', height: [2], fit: BoxFit.[3])

Drag options to blanks, or click blank then click option'

Aasset

B150.0

Ccover

Dnetwork

Attempts:

3 left

💡 Hint

Common Mistakes

Using Image.network for assets.

Using integer for height without decimal.

Using wrong BoxFit values.

Use Image.asset for local images, set height as a double, and use BoxFit.cover to fill the space nicely.

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