Wrap widget in Flutter - Mini App: Build & Ship

Build: Wrap Widget Demo

This screen shows a list of colored boxes arranged using the Wrap widget. The boxes automatically move to the next line when they don't fit horizontally.

Target UI

Wrap Widget Demo

[Red] [Green] [Blue] [Yellow]
[Orange] [Purple] [Pink] [Brown]

The boxes wrap to next line if needed.

Use a Wrap widget to arrange colored boxes horizontally.

Each box should be a square with a fixed size and a distinct color.

Boxes should wrap to the next line automatically when they reach the screen edge.

Add spacing of 8 pixels between boxes horizontally and vertically.

Starter Code

Flutter

import 'package:flutter/material.dart';

class WrapWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Wrap Widget Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: // TODO: Add Wrap widget here
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class WrapWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Wrap Widget Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Wrap(
          spacing: 8.0,
          runSpacing: 8.0,
          children: [
            Container(width: 60, height: 60, color: Colors.red),
            Container(width: 60, height: 60, color: Colors.green),
            Container(width: 60, height: 60, color: Colors.blue),
            Container(width: 60, height: 60, color: Colors.yellow),
            Container(width: 60, height: 60, color: Colors.orange),
            Container(width: 60, height: 60, color: Colors.purple),
            Container(width: 60, height: 60, color: Colors.pink),
            Container(width: 60, height: 60, color: Colors.brown),
          ],
        ),
      ),
    );
  }
}

We use the Wrap widget to arrange boxes horizontally and wrap them to the next line when needed. The spacing property adds horizontal space between boxes, and runSpacing adds vertical space between lines. Each Container is a colored square of 60x60 pixels. This layout adapts nicely to different screen widths.

Final Result

Completed Screen

Wrap Widget Demo

[■ Red] [■ Green] [■ Blue] [■ Yellow]
[■ Orange] [■ Purple] [■ Pink] [■ Brown]

Boxes are arranged horizontally and wrap to next line if screen is narrow.

No scrolling needed; layout adjusts automatically.

Stretch Goal

Add a toggle button in the AppBar to switch between horizontal Wrap and vertical Wrap (direction change).

💡 Hint

Use a StatefulWidget and change the Wrap's direction property between Axis.horizontal and Axis.vertical when the button is pressed.