asjqkkkk / circle_list

A new Flutter package for circle list.
Other
36 stars 13 forks source link

Square children clipped when rotated #13

Open kakali opened 3 years ago

kakali commented 3 years ago

With square children, sometimes some of them might get clipped. This can be solved by setting clipBehavior to Clip.none in both Stacks.

asjqkkkk commented 3 years ago

yes, there need have a param to set this value

rimedar commented 2 years ago

Yes, i have same problem, i has a circle imagen with a bottom text, and the text is clipped in some cases.

rimedar commented 2 years ago

I solved it, in the CircleList class, you only need put in the internal stack the overflow poperty to visible: So, you can put this property optional in the implementation of the package.

Transform.rotate(
                  angle: isAnimationStop
                      ? (dragModel.angleDiff + widget.initialAngle)
                      : (-_animationRotate.value * pi * 2 +
                          widget.initialAngle),
                  child: Stack(
                    **overflow: Overflow.visible,**
                    children: List.generate(widget.children.length, (index) {
                      final double childrenDiameter =
                          2 * pi * betweenRadius / widget.children.length -
                              widget.childrenPadding;
                      Offset childPoint = getChildPoint(
                          index,
                          widget.children.length,
                          betweenRadius,
                          childrenDiameter);
                      return Positioned(
                        left: outerRadius + childPoint.dx,
                        top: outerRadius + childPoint.dy,
                        child: Transform.rotate(
                          angle: widget.isChildrenVertical
                              ? (-(dragModel.angleDiff) - widget.initialAngle)
                              : ((dragModel.angleDiff) + widget.initialAngle),
                          child: Container(
                              width: childrenDiameter,
                              height: childrenDiameter,
                              alignment: Alignment.center,
                              child: widget.children[index]),
                        ),
                      );
                    }),
                  ),
                ),