动态减小小部件的大小？

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