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.

Practice

1. What is the main purpose of using responsive layout patterns in Flutter apps?

easy

A. To make the app look good on different screen sizes

B. To add animations to the app

C. To improve app performance by caching data

D. To change the app's theme colors automatically

Solution

1. Step 1: Understand responsive layout meaning

   Responsive layouts adjust UI to fit various screen sizes and orientations.

2. Step 2: Identify the main goal

   The goal is to ensure the app looks good and works well on phones, tablets, and other devices.

3. Final Answer:

   To make the app look good on different screen sizes -> Option A

4. Quick Check:

   Responsive layout = good appearance on all screens [OK]

Hint: Responsive means adapting UI to screen size [OK]

Common Mistakes:

• Confusing responsive layout with animations
• Thinking it improves performance directly
• Mixing it with theme or color changes

2. Which Flutter widget helps you get the current screen size inside its builder function?

easy

A. Container

B. MediaQuery

C. LayoutBuilder

D. Scaffold

Solution

1. Step 1: Recall widgets for screen size

   MediaQuery provides screen info globally, but LayoutBuilder gives constraints inside its builder.

2. Step 2: Identify widget with builder function

   LayoutBuilder has a builder that provides BoxConstraints with maxWidth and maxHeight.

3. Final Answer:

   LayoutBuilder -> Option C

4. Quick Check:

   LayoutBuilder = widget with builder for size [OK]

Hint: LayoutBuilder uses builder with constraints [OK]

Common Mistakes:

• Choosing MediaQuery which is not a builder widget
• Picking Container or Scaffold which don't provide size info
• Confusing MediaQuery and LayoutBuilder roles

3. Given this Flutter code snippet, what widget will be shown on a screen width of 500 pixels?

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Text('Large Screen');
    } else {
      return Text('Small Screen');
    }
  },
)

medium

A. Text widget showing 'Small Screen'

B. Text widget showing 'Large Screen'

C. An error because maxWidth is not accessible

D. Empty container with no text

Solution

1. Step 1: Check the condition with maxWidth

   The code checks if maxWidth > 600 to show 'Large Screen'.

2. Step 2: Compare given width 500 with 600

   Since 500 is less than 600, the else branch runs, showing 'Small Screen'.

3. Final Answer:

   Text widget showing 'Small Screen' -> Option A

4. Quick Check:

   500 < 600 means 'Small Screen' shown [OK]

Hint: Compare maxWidth to 600 to pick text [OK]

Common Mistakes:

• Assuming 500 is greater than 600
• Thinking maxWidth is not accessible
• Ignoring else branch

4. What is wrong with this Flutter code for responsive layout?

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Row(children: [Text('A'), Text('B')]);
    } else {
      return Column(children: [Text('A'), Text('B')]);
    }
  },
)

medium

A. Row and Column are used incorrectly for screen sizes

B. Using Row for small screens may cause overflow horizontally

C. No error; code works fine for responsive layout

D. Missing MediaQuery to get screen size

Solution

1. Step 1: Analyze layout for small screens

   For small screens, a Row with two Text widgets may overflow horizontally.

2. Step 2: Understand overflow risk

   Row arranges children horizontally, which can cause overflow if width is limited.

3. Step 3: Check other options

   MediaQuery is not required here; LayoutBuilder provides constraints. Using Column on large screens is fine.

4. Final Answer:

   Using Row for small screens may cause overflow horizontally -> Option B

5. Quick Check:

   Row on narrow screen risks overflow [OK]

Hint: Row on narrow screen can overflow horizontally [OK]

Common Mistakes:

• Thinking code has no error
• Believing MediaQuery is mandatory here
• Confusing Row and Column usage

5. You want to create a responsive Flutter layout that shows a vertical list on narrow screens and a grid with 3 columns on wide screens. Which approach is best?

hard

A. Use a fixed Container size and ignore screen width

B. Use MediaQuery to get screen height and switch between ListView and GridView

C. Always use GridView with 3 columns regardless of screen size

D. Use LayoutBuilder to check maxWidth and return ListView or GridView accordingly

Solution

1. Step 1: Decide how to detect screen width

   LayoutBuilder provides maxWidth constraints inside builder, ideal for responsive layout.

2. Step 2: Choose widgets based on width

   Return ListView for narrow screens and GridView with 3 columns for wide screens.

3. Step 3: Evaluate other options

   MediaQuery height is not relevant; fixed Container ignores responsiveness; always GridView ignores narrow screens.

4. Final Answer:

   Use LayoutBuilder to check maxWidth and return ListView or GridView accordingly -> Option D

5. Quick Check:

   LayoutBuilder + conditional widgets = responsive layout [OK]

Hint: Use LayoutBuilder to switch layouts by width [OK]

Common Mistakes:

• Using screen height instead of width
• Ignoring responsiveness by fixed sizes
• Always using one layout without condition