Hero animations in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wrap the image with a Hero widget using the tag 'hero-image'.

Flutter

Hero(tag: [1], child: Image.asset('assets/picture.png'))

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

A'heroTag'

B'image-hero'

C'picture'

D'hero-image'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a tag that is not a string.

Using different tags on source and destination widgets.

The Hero widget requires a tag string to identify the shared element. 'hero-image' matches the tag used in both screens.

2fill in blank

medium

Complete the code to navigate to the DetailPage with a hero animation.

Flutter

Navigator.push(context, MaterialPageRoute(builder: (context) => [1]()));

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

ADetailPage

BHomePage

CMainPage

DSettingsPage

Attempts:

3 left

💡 Hint

Common Mistakes

Navigating to the wrong page without the Hero widget.

Using a page class that does not exist.

To trigger the hero animation, navigate to the DetailPage which contains the matching Hero widget.

3fill in blank

hard

Fix the error in the Hero widget by completing the missing tag value.

Flutter

Hero(tag: [1], child: Icon(Icons.star, size: 50))

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

A'star-icon'

BIcons.star

C50

DIcon(Icons.star)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a widget or number as the tag.

Leaving the tag empty.

The tag must be a unique string, not an Icon or number. 'star-icon' is a valid tag string.

4fill in blank

hard

Fill both blanks to create a Hero widget with tag 'profile-pic' wrapping a CircleAvatar.

Flutter

Hero(tag: [1], child: CircleAvatar(radius: [2]))

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

A'profile-pic'

B30

C50

D'avatar'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong tag string.

Using an incorrect radius value.

The tag must be 'profile-pic' and the CircleAvatar radius is 30 for correct sizing.

5fill in blank

hard

Fill all three blanks to create a Hero animation with tag 'logo', wrapping an Image widget with width 100 and height 100.

Flutter

Hero(tag: [1], child: Image.asset('assets/logo.png', width: [2], height: [3]))

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

A'logo'

B100

C150

D'icon'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different width and height values.

Using a wrong tag string.

The tag is 'logo' and both width and height are 100 for a square image.