在屏幕上用颤动在屏幕上绘制大小不同但间距相等的气泡

Question

我想建立一个屏幕，上面有多个半径不同的气泡（数量可能有所不同）。它们的位置应使其几乎覆盖整个屏幕，但它们之间具有相等的间距。我尝试了许多不同的操作（部件）以达到所需的外观，但对效果并不满意。我正在附上我想要的结果的屏幕截图。

这是我的代码...

import 'package:flutter_tags/selectable_tags.dart';
import 'package:provider/provider.dart';
import 'package:scool/provider/tags.dart';

class CategoriesScreen extends StatelessWidget {
  static const routeName = '/Categories-Screen';
  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    List<Tag> tags = Provider.of<Tags>(context, listen: false).items;
    return Scaffold(
        body: Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(20),
          height: 100,
          width: width,
          child: Center(
            child: Image.asset(
              'assets/images/Artboard – 4 (1).png',
              fit: BoxFit.contain,
            ),
          ),
        ),
        Container(
            width: width,
            height: 32,
            padding: EdgeInsets.only(bottom: 10),
            child: Center(
              child: Text(
                'Choose categories of your interest.',
                style: Theme.of(context).textTheme.bodyText1,
              ),
            )),
        SingleChildScrollView(
          child: Container(
              child: Wrap(
            spacing: 5,
            alignment: WrapAlignment.spaceBetween,
            children: <Widget>[
              ...tags
                  .map((i) => Container(
                        width: (i.title.length * 12).toDouble(),
                        height: (i.title.length * 12).toDouble(),
                        child: CircleAvatar(
                          backgroundColor: Colors.pink[100],
                          radius: (i.title.length * 6.5).toDouble(),
                          child: Text(i.title),
                        ),
                      ))
                  .toList()
            ],
          )),
        )
      ],
    ));
  }
}