动态减少窗口小部件的大小？

Question

我想制作一个看起来像这样的小部件-动态地：

这是我的尝试，考虑到定义了较大圆的初始尺寸，我想动态减小尺寸：

Row _pagesIndcator(int length) {
  List<Widget> points = <Widget>[];

  for (var i = 0; i < length; i++) {
    points.add(Padding(
      padding: const EdgeInsets.only(right:2.0),
      child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
          ),
          height: 8,
          width: 8,
        ),
    ));
  }
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: points,
  );
}

我尝试了这个： height: 8-i/1,

但是我认为这不是正确的方法！

Answer 1

尝试一下，让我知道它是否有效，您可以根据需要使用这些值。

Row _pagesIndicator(int length) {
  List<Widget> list = [];
  list = List.generate(length, (i) {
    return Container(
      width: (length - i) * 10.0 + (i + 1) * 5,
      height: (length - i) * 10.0 + (i + 1) * 5,
      margin: EdgeInsets.symmetric(horizontal: 2),
      decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
    );
  });

  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: list,
  );
}