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

问题描述

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

这是我的代码...

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()
            ],)
      ],));
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）