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