Responsive and Adaptive UI in Flutter/

...

/

The Wrap Widget

The Wrap Widget

Learn to use the Wrap widget and let the framework decide the layout of the Flutter widget.

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, ...