Flutter warp with expanded children

Viewed 69

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.

enter image description here

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

0 Answers
Related