Responsive layout patterns in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a responsive layout that uses a Column on small screens.

Flutter

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth < 600) {
        return [1](
          children: [Text('Small screen')],
        );
      } else {
        return Row(
          children: [Text('Large screen')],
        );
      }
    },
  );
}

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

AColumn

BRow

CContainer

DStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using Row instead of Column for small screens.

Using Container which does not arrange children.

On small screens, a Column arranges children vertically, which is suitable for narrow widths.

2fill in blank

medium

Complete the code to use MediaQuery to get the screen width.

Flutter

double screenWidth = MediaQuery.of(context).[1].width;

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

Awidget

Bsize

Ctext

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using MediaQuery.of(context).data which is invalid.

Using MediaQuery.of(context).text which does not exist.

MediaQuery.of(context).size.width provides access to screen size and other info.

3fill in blank

hard

Fix the error in the code to make the layout responsive using Flex widget.

Flutter

return Flex(
  direction: [1],
  children: [Text('Responsive')],
);

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

ADirection.horizontal

BAxis.horizontal

CAxis.vertical

DDirection.vertical

Attempts:

3 left

💡 Hint

Common Mistakes

Using Direction instead of Axis enum.

Using Axis.horizontal when vertical layout is needed.

Flex widget uses Axis.vertical or Axis.horizontal to set direction. Axis.vertical stacks children vertically.

4fill in blank

hard

Fill both blanks to create a responsive layout that switches between Row and Column based on width.

Flutter

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      return [1](
        direction: constraints.maxWidth > 500 ? [2] : Axis.vertical,
        children: [Text('Responsive layout')],
      );
    },
  );
}

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

AFlex

BRow

CAxis.horizontal

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using Row widget directly without direction property.

Using Column widget where direction property is needed.

Flex widget with direction Axis.horizontal creates a Row-like layout; Axis.vertical creates a Column-like layout.

5fill in blank

hard

Fill all three blanks to create a responsive GridView with 2 columns on small screens and 4 on large screens.

Flutter

GridView.count(
  crossAxisCount: constraints.maxWidth < 600 ? [1] : [2],
  children: List.generate(8, (index) => [3]),
);

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

A2

B4

CCard(child: Text('Item $index'))

DContainer()

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed column count ignoring screen width.

Using Container() which shows empty boxes.

Use 2 columns for narrow screens, 4 for wide. Each grid item is a Card with text showing the index.