Container widget in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Container widget code?

Consider this Flutter code snippet. What will you see on the screen?

Flutter

Container(
  width: 100,
  height: 100,
  color: Colors.red,
  child: Text('Hi'),
)

A A 100x100 red square with no text visible.

B A 100x100 blue square with the text 'Hi' inside it.

C A 100x100 red square with the text 'Hi' inside it.

D An error because Text widget cannot be a child of Container.

💡 Hint

Think about the color property and the child widget inside Container.

The Container has width and height 100, color red, and contains a Text widget showing 'Hi'. So you see a red square with 'Hi' text inside.

📝 Syntax

intermediate

Which option causes a syntax error in Container usage?

Look at these Container widget declarations. Which one will cause a syntax error?

A Container(width: 100, height: 100, color: Colors.green);

B Container(width: 100, height: 100, color: Colors.green, child: Text('Hi'));

C Container(width: 100, height: 100, child: Text('Hello'));

D Container(width: 100 height: 100, color: Colors.green);

💡 Hint

Check the commas between parameters.

Option D is missing a comma between width and height parameters, causing a syntax error.

❓ lifecycle

advanced

What happens if you set both color and decoration in a Container?

Consider this Container code: Container( color: Colors.blue, decoration: BoxDecoration(color: Colors.red), width: 50, height: 50, ) What color will the Container show?

A Blue, because color property overrides decoration.

B Red, because decoration's color overrides color property.

C Purple, a mix of blue and red colors.

D Transparent, because setting both causes an error.

💡 Hint

Check Flutter docs about Container's color and decoration properties.

If decoration is set, Container's color property is ignored. The decoration's color is used, so the Container is red.

❓ navigation

advanced

How to make a Container respond to taps and navigate to a new screen?

You want a Container that when tapped, opens a new screen. Which code snippet achieves this?

A Wrap Container with GestureDetector and use Navigator.push inside onTap.

B Add onTap property directly to Container with Navigator.push call.

C Use Container's onPressed property to call Navigator.push.

D Wrap Container with InkWell but do not provide onTap callback.

💡 Hint

Container itself does not have onTap or onPressed properties.

Container has no onTap property. Wrapping it with GestureDetector and using Navigator.push inside onTap is correct.

🔧 Debug

expert

Why does this Container not show the expected background color?

This code: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Colors.yellow, ), child: Text('Hello'), ) shows no yellow background. Why?

A Because Container has no size, so color is not visible.

B Because borderRadius cannot be used with color in BoxDecoration.

C Because Text widget covers the entire Container hiding the color.

D Because color property must be set directly on Container, not in decoration.

💡 Hint

Think about Container size when no width or height is set.

Container has no width or height and child Text has no background, so Container shrinks to Text size and color is not visible as background.