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.