Responsive layout patterns in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does this Flutter code behave on different screen widths?

Consider this Flutter widget that uses LayoutBuilder to adapt its layout. What will be the displayed text on a screen width of 500 pixels?

Flutter

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Text('Wide screen');
    } else {
      return Text('Narrow screen');
    }
  },
)

A Displays 'Wide screen'

B Displays nothing

C Displays 'Narrow screen'

D Throws a runtime error

💡 Hint

Think about the condition checking maxWidth and the given screen width.

The LayoutBuilder checks if maxWidth is greater than 600. Since 500 is less than 600, it returns the Text widget with 'Narrow screen'.

🧠 Conceptual

intermediate

What is the main purpose of using MediaQuery in Flutter for responsive design?

Why do Flutter developers use MediaQuery when building responsive layouts?

A To manage app state across widgets

B To create animations

C To handle user input events

D To get device screen size and orientation information

💡 Hint

Think about what information is needed to adapt UI to different devices.

MediaQuery provides information about the device's screen size, pixel density, and orientation, which helps build layouts that adapt to different screen sizes.

📝 Syntax

advanced

Which Flutter widget correctly implements a responsive grid that shows 4 columns on wide screens and 2 columns on narrow screens?

Choose the correct code snippet that uses GridView and LayoutBuilder to create a responsive grid with 4 columns if width > 800, else 2 columns.

A

LayoutBuilder(builder: (context, constraints) {
  int count = constraints.maxWidth > 800 ? 4 : 2;
  return GridView.count(
    crossAxisCount: count,
    children: List.generate(8, (index) => Container(color: Colors.blue)),
  );
})

B

GridView.count(
  crossAxisCount: 4,
  children: List.generate(8, (index) => Container(color: Colors.blue)),
)

C

LayoutBuilder(builder: (context, constraints) {
  int count = constraints.maxWidth > 800 ? 2 : 4;
  return GridView.count(
    crossAxisCount: count,
    children: List.generate(8, (index) => Container(color: Colors.blue)),
  );
})

D

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemCount: 8,
  itemBuilder: (context, index) => Container(color: Colors.blue),
)

💡 Hint

Check the condition for crossAxisCount and how LayoutBuilder is used.

Option A correctly uses LayoutBuilder to check maxWidth and sets crossAxisCount to 4 if width > 800, else 2. Other options either hardcode columns or reverse the condition.

❓ lifecycle

advanced

What happens to a StatefulWidget when device orientation changes in Flutter?

When the device orientation changes (e.g., portrait to landscape), what is the typical behavior of a StatefulWidget in Flutter?

A Nothing changes; orientation changes do not affect widgets

B The widget is rebuilt but its State object is preserved

C The widget and its State object are both destroyed and recreated

D The widget rebuilds but loses its State object causing reset

💡 Hint

Think about how Flutter handles widget rebuilds and state preservation.

Flutter rebuilds widgets on orientation change but preserves the State object, so stateful data is kept unless explicitly reset.

🔧 Debug

expert

Why does this responsive Flutter layout fail to update when rotating the device?

This code uses MediaQuery.of(context).size.width in initState to set a variable for layout. Why does the layout not update on device rotation?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late double screenWidth;

  @override
  void initState() {
    super.initState();
    // Moved MediaQuery call to didChangeDependencies
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    screenWidth = MediaQuery.of(context).size.width;
  }

  @override
  Widget build(BuildContext context) {
    return Text(screenWidth > 600 ? 'Wide' : 'Narrow');
  }
}

A All of the above

B The variable screenWidth is not updated on rebuild, so it keeps old value

C The build method does not use MediaQuery directly, so it won't react to changes

D MediaQuery.of(context) cannot be used in initState because context is not fully initialized

💡 Hint

Consider when MediaQuery data is available and how state variables update.

MediaQuery.of(context) should not be called in initState because context is not fully available. Also, screenWidth is set once and not updated on rebuild, so the UI does not respond to orientation changes. The build method uses the stored variable instead of querying MediaQuery again.