Skip to content

Using rounded caps results in losing opacity with progressCircle #22

Open
@RickVM

Description

@RickVM

When you apply roundedCap to every step, as in the inner cicle, a color will lose its opacity. Probably because these are partially drawn over the next step?

image

Example code

class ActiveMinutesProgressCircle extends StatelessWidget {
  final Widget child;
  final double stepSize;
  final currentStep = 42;
  final totalSteps = 100; // Percentage!

  ActiveMinutesProgressCircle({this.child, this.stepSize = 12.0});

  @override
  Widget build(BuildContext context) {
    return CircularStepProgressIndicator(
      customColor: (int i) {
        if(currentStep > (2*totalSteps) || (currentStep > totalSteps && (currentStep % totalSteps) > i)) {
          return kColors.darkGreyBlue;
        } else if (currentStep >= i) {
          return kColors.greyBlue;
        } else {
          return Colors.white.withOpacity(0.5); // Doesnt work, opacity lost with roundedcaps
          // return const Color(0xFFF9F0CA); // Does work (same color without opacity)
        }
      },
      roundedCap: (int i, bool isSelected) => true, // If we set to false, opacity will work. Furhtermore, if we partially select true/false the end cap doesnt round nicely
      totalSteps: 100,
      currentStep: currentStep,
      selectedStepSize: stepSize,
      unselectedStepSize: stepSize,
      padding: 0,
      child: child ?? SizedBox.shrink(),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions