Adding progressBorderColor property on progressBar (#196)

* adding progressBorderColor on progressBar draw

* fixing border colors on linear percent and adding examples

* removing unnecessary parse comparsion on progress(double)

* refactoring border correction symmetrics

---------

Co-authored-by: Thiago Carvalho Ribeiro Bardez - TBA <thiago.bardez@iteris.com.br>

example/ios/Flutter/AppFrameworkInfo.plist

@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>8.0</string>
+  <string>11.0</string>
 </dict>
 </plist>

example/ios/Runner.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 46;
+	objectVersion = 54;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -141,7 +141,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0910;
+				LastUpgradeCheck = 1300;
 				ORGANIZATIONNAME = "The Chromium Authors";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
@@ -186,6 +186,7 @@
 /* Begin PBXShellScriptBuildPhase section */
 		3B06AD1E1E4923F5004D2608 /* Thin Binary */ = {
 			isa = PBXShellScriptBuildPhase;
+			alwaysOutOfDate = 1;
 			buildActionMask = 2147483647;
 			files = (
 			);
@@ -200,6 +201,7 @@
 		};
 		9740EEB61CF901F6004384FC /* Run Script */ = {
 			isa = PBXShellScriptBuildPhase;
+			alwaysOutOfDate = 1;
 			buildActionMask = 2147483647;
 			files = (
 			);
@@ -292,7 +294,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -339,7 +341,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				TARGETED_DEVICE_FAMILY = "1,2";

example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0910"
+   LastUpgradeVersion = "1300"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

example/ios/Runner/Info.plist

@@ -41,5 +41,9 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
+	<key>UIApplicationSupportsIndirectInputEvents</key>
+	<true/>
 </dict>
 </plist>

example/lib/sample_circular_page.dart

@@ -337,6 +337,72 @@ class _SampleCircularPageState extends State<SampleCircularPage> {
               arcBackgroundColor: Colors.transparent,
               arcType: ArcType.HALF,
             ),
+            const SizedBox(height: 20),
+            Padding(
+              padding: const EdgeInsets.only(bottom: 18.0),
+              child: Center(
+                child: Text(
+                  "With different border color",
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
+                ),
+              ),
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                CircularPercentIndicator(
+                  radius: 40.0,
+                  progressColor: Colors.yellow,
+                  progressBorderColor: Colors.green,
+                  percent: .2,
+                  lineWidth: 15,
+                  center: Text(
+                    "20.0%",
+                    style:
+                        TextStyle(fontWeight: FontWeight.bold, fontSize: 12.0),
+                  ),
+                  backgroundWidth: 15,
+                  fillColor: Colors.transparent,
+                  circularStrokeCap: CircularStrokeCap.round,
+                  arcBackgroundColor: Colors.yellow[200],
+                  arcType: ArcType.FULL,
+                ),
+                CircularPercentIndicator(
+                  radius: 40.0,
+                  progressColor: Colors.white,
+                  progressBorderColor: Colors.blue,
+                  percent: .9,
+                  lineWidth: 10,
+                  center: Text(
+                    "90.0%",
+                    style:
+                        TextStyle(fontWeight: FontWeight.bold, fontSize: 12.0),
+                  ),
+                  backgroundWidth: 15,
+                  fillColor: Colors.transparent,
+                  circularStrokeCap: CircularStrokeCap.round,
+                  arcBackgroundColor: Colors.transparent,
+                  arcType: ArcType.FULL,
+                ),
+                CircularPercentIndicator(
+                  radius: 40.0,
+                  progressColor: Colors.red,
+                  progressBorderColor: Colors.black,
+                  percent: .4,
+                  lineWidth: 10,
+                  backgroundWidth: 15,
+                  fillColor: Colors.transparent,
+                  circularStrokeCap: CircularStrokeCap.round,
+                  arcBackgroundColor: Colors.grey,
+                  arcType: ArcType.FULL,
+                  center: Text(
+                    "40.0%",
+                    style:
+                        TextStyle(fontWeight: FontWeight.bold, fontSize: 12.0),
+                  ),
+                ),
+              ],
+            ),
           ],
         ),
       ),

example/lib/sample_linear_page.dart

@@ -275,6 +275,20 @@ class _SampleLinearPageState extends State<SampleLinearPage> {
                 ),
               ),
               Text('Custom Edges'),
+              Padding(
+                padding: EdgeInsets.all(15),
+                child: LinearPercentIndicator(
+                  lineHeight: 20,
+                  center: Text('90%'),
+                  progressColor: Colors.white,
+                  progressBorderColor: Colors.green,
+                  barRadius: Radius.elliptical(5, 10),
+                  percent: .9,
+                  animation: true,
+                  animationDuration: 1400,
+                ),
+              ),
+              Text('Custom Border Color'),
             ],
           ),
         ),

example/pubspec.lock

@@ -5,35 +5,47 @@ packages:
     dependency: transitive
     description:
       name: characters
-      url: "https://pub.dartlang.org"
+      sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c
+      url: "https://pub.dev"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   collection:
     dependency: transitive
     description:
       name: collection
-      url: "https://pub.dartlang.org"
+      sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0
+      url: "https://pub.dev"
     source: hosted
-    version: "1.16.0"
+    version: "1.17.0"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.6.5"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      url: "https://pub.dartlang.org"
+      sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
+      url: "https://pub.dev"
     source: hosted
-    version: "0.1.4"
+    version: "0.2.0"
   meta:
     dependency: transitive
     description:
       name: meta
-      url: "https://pub.dartlang.org"
+      sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42"
+      url: "https://pub.dev"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0"
   percent_indicator:
     dependency: "direct main"
     description:
@@ -50,9 +62,10 @@ packages:
     dependency: transitive
     description:
       name: vector_math
-      url: "https://pub.dartlang.org"
+      sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
+      url: "https://pub.dev"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.4"
 sdks:
-  dart: ">=2.14.0 <3.0.0"
+  dart: ">=2.17.0-0 <3.0.0"
   flutter: ">=2.12.0"

lib/circular_percent_indicator.dart

@@ -37,6 +37,9 @@ class CircularPercentIndicator extends StatefulWidget {
   ///First color applied to the complete circle
   final Color fillColor;
 
+  ///Color of the border of the progress bar , default = null
+  final Color? progressBorderColor;
+
   ///Color of the background of the circle , default = transparent
   final Color backgroundColor;
 
@@ -130,6 +133,7 @@ class CircularPercentIndicator extends StatefulWidget {
     this.onAnimationEnd,
     this.widgetIndicator,
     this.rotateLinearGradient = false,
+    this.progressBorderColor,
   }) : super(key: key) {
     if (linearGradient != null && progressColor != null) {
       throw ArgumentError(
@@ -250,6 +254,7 @@ class _CircularPercentIndicatorState extends State<CircularPercentIndicator>
               painter: _CirclePainter(
                 progress: _percent * 360,
                 progressColor: widget.progressColor,
+                progressBorderColor: widget.progressBorderColor,
                 backgroundColor: widget.backgroundColor,
                 startAngle: widget.startAngle,
                 circularStrokeCap: widget.circularStrokeCap,
@@ -363,12 +368,14 @@ class _ArcAngles {
 class _CirclePainter extends CustomPainter {
   final Paint _paintBackground = Paint();
   final Paint _paintLine = Paint();
+  final Paint _paintLineBorder = Paint();
   final Paint _paintBackgroundStartAngle = Paint();
   final double lineWidth;
   final double backgroundWidth;
   final double progress;
   final double radius;
   final Color progressColor;
+  final Color? progressBorderColor;
   final Color backgroundColor;
   final CircularStrokeCap circularStrokeCap;
   final double startAngle;
@@ -386,6 +393,7 @@ class _CirclePainter extends CustomPainter {
     required this.radius,
     required this.progressColor,
     required this.backgroundColor,
+    this.progressBorderColor,
     this.startAngle = 0.0,
     this.circularStrokeCap = CircularStrokeCap.butt,
     this.linearGradient,
@@ -409,8 +417,16 @@ class _CirclePainter extends CustomPainter {
 
     _paintLine.color = progressColor;
     _paintLine.style = PaintingStyle.stroke;
-    _paintLine.strokeWidth = lineWidth;
+    _paintLine.strokeWidth =
+        progressBorderColor != null ? lineWidth - 2 : lineWidth;
     _paintLine.strokeCap = circularStrokeCap.strokeCap;
+
+    if (progressBorderColor != null) {
+      _paintLineBorder.color = progressBorderColor!;
+      _paintLineBorder.style = PaintingStyle.stroke;
+      _paintLineBorder.strokeWidth = lineWidth;
+      _paintLineBorder.strokeCap = circularStrokeCap.strokeCap;
+    }
   }
 
   @override
@@ -428,15 +444,15 @@ class _CirclePainter extends CustomPainter {
     }
 
     if (maskFilter != null) {
-      _paintLine.maskFilter = maskFilter;
+      _paintLineBorder.maskFilter = _paintLine.maskFilter = maskFilter;
     }
     if (linearGradient != null) {
       if (rotateLinearGradient && progress > 0) {
         double correction = 0;
         if (_paintLine.strokeCap != StrokeCap.butt) {
           correction = math.atan(_paintLine.strokeWidth / 2 / radius);
         }
-        _paintLine.shader = SweepGradient(
+        _paintLineBorder.shader = _paintLine.shader = SweepGradient(
           transform: reverse
               ? GradientRotation(
                   radians(-90 - progress + startAngle) - correction)
@@ -451,7 +467,8 @@ class _CirclePainter extends CustomPainter {
           Rect.fromCircle(center: center, radius: radius),
         );
       } else if (!rotateLinearGradient) {
-        _paintLine.shader = linearGradient!.createShader(
+        _paintLineBorder.shader =
+            _paintLine.shader = linearGradient!.createShader(
           Rect.fromCircle(center: center, radius: radius),
         );
       }
@@ -472,6 +489,18 @@ class _CirclePainter extends CustomPainter {
           radians(360 * startAngleFixedMargin - 90.0 + fixedStartAngle)
               .toDouble();
       final end = radians(-progress * startAngleFixedMargin).toDouble();
+      if (progressBorderColor != null) {
+        canvas.drawArc(
+          Rect.fromCircle(
+            center: center,
+            radius: radius,
+          ),
+          start,
+          end,
+          false,
+          _paintLineBorder,
+        );
+      }
       canvas.drawArc(
         Rect.fromCircle(
           center: center,
@@ -485,6 +514,18 @@ class _CirclePainter extends CustomPainter {
     } else {
       final start = radians(-90.0 + fixedStartAngle).toDouble();
       final end = radians(progress * startAngleFixedMargin).toDouble();
+      if (progressBorderColor != null) {
+        canvas.drawArc(
+          Rect.fromCircle(
+            center: center,
+            radius: radius,
+          ),
+          start,
+          end,
+          false,
+          _paintLineBorder,
+        );
+      }
       canvas.drawArc(
         Rect.fromCircle(
           center: center,