Search⌘ K
AI Features
Home
Courses
Responsive and Adaptive UI in Flutter

The Wrap Widget

Explore how the Wrap widget improves responsive design by placing children horizontally and wrapping them to new lines when space is limited. Learn to replace fixed width rows and tables to create adaptive multi-child layouts for different screen sizes in Flutter.

We'll cover the following...

Using a Row widget

Sometimes, a Row widget is all we need in a Flutter application, but the children are too wide when we run the application on smaller screens. Take a look a the following code:

import 'package:flutter/material.dart';

class Offer extends StatelessWidget {
  final int price;
  final String description;
  final String title;

  const Offer({
    Key? key,
    required this.price,
    required this.description,
    required this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        color: Colors.green[200],
        width: 150.0,
        height: 200.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(
              title,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 24.0,
              ),
            ),
            Text(
              description,
              style: const TextStyle(
                fontSize: 18.0,
              ),
            ),
            Text('\$ $price'),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Buy'),
            ),
          ],
        ),
      ),
    );
  }
}
A Row widget containing some Offer widgets

In this application, we provide a service for which our users have to pay. They can choose between four different tiers: “Basic,” “Family,” “Pro,” and “Enterprise.” We want to show the possible choices to our users on a single screen. To build this page, ...