i have a list of texts that i need to wrap on the screen, the widget is a container with the text inside. to get the desired design, i use the wrap widget but i need the containers inside to expand to the maximum width with the same whitespace between.
as you can see from the image, lines 1 and 2 are ok, happy accident, but line 3 needs to expand the three widgets so they will occupied the whole width.
here is a sample of what i have now:
import 'dart:math';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.2,
),
Wrap(
alignment: WrapAlignment.spaceBetween,
runSpacing: 10,
// spacing: 10,
children: _getChildren(width),
),
Container(
height: MediaQuery.of(context).size.height * 0.2,
),
],
),
),
);
}
List<Widget> _getChildren(double width) {
var rnd = Random();
var list = <Widget>[];
for (var i = 0; i < 10; i++) {
final a = rnd.nextInt(20);
var name = "a";
for (var i = 0; i < a; i++) {
name += "a";
}
list.add(
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: width,
minWidth: width * 0.1,
),
child: Container(
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.amber,
border: Border.all(color: Colors.blue),
borderRadius: const BorderRadius.all(Radius.circular(15))),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: Flexible(
fit: FlexFit.tight,
flex: 5,
child: Text(
name,
maxLines: 1,
textAlign: TextAlign.center,
),
),
),
),
),
);
}
return list;
}
}
thanks
