CODEWITHSUNDEEP
flutter
mshwf
mshwf

Reputation: 7449

reducing size of widget dynamically?

I want to make a widget that looks like this- dynamicallly:

enter image description here

This is my try, I want to reduce the size dynamically given that I define the initial size of the bigger circle:

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

I tried this: height: 8-i/1,

but I don't think it's the right way of making it!

Upvotes: 0

Views: 137

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267714

enter image description here

Give this a try and let me know if it works, you can play with the values according to your needs. 

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

Upvotes: 1

Related Questions