Add linearGradientBackgroundColor param for LinearPercentIndicator (#114

)

* Jeremiah-Parrack | add linearGradientBackgroundColor param for LinearPercentIndicator

* Jeremiah-Parrack | remove idea from git

* Jeremiah-Parrack | add linearGradient exaample

Co-authored-by: Jeremiah-Parrack <jeremiah.parrack@coxautoinc.com>

.gitignore

@@ -3,6 +3,7 @@
 
 .packages
 .pub/
+.idea/
 
 build/
 ios/.generated/

example/lib/sample_linear_page.dart

@@ -47,6 +47,24 @@ class _SampleLinearPageState extends State<SampleLinearPage> {
                       child: Icon(Icons.airplanemode_active, size: 50)),
                 ),
               ),
+              Padding(
+                padding: EdgeInsets.all(15.0),
+                child: LinearPercentIndicator(
+                  width: MediaQuery.of(context).size.width - 50,
+                  lineHeight: 20.0,
+                  animationDuration: 3000,
+                  percent: 0.5,
+                  animateFromLastPercent: true,
+                  center: Text("50.0%"),
+                  linearStrokeCap: LinearStrokeCap.butt,
+                  linearGradient: LinearGradient(
+                    colors: <Color>[Color(0xffB07BE6), Color(0xff5BA2E0)],
+                  ),
+                  linearGradientBackgroundColor: LinearGradient(
+                    colors: <Color>[Color(0xffe5d6fa), Color(0xffc8dff8)],
+                  ),
+                ),
+              ),
               Padding(
                 padding: EdgeInsets.all(15.0),
                 child: FittedBox(

example/pubspec.lock

@@ -33,7 +33,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "3.3.0"
+    version: "3.0.0"
   sky_engine:
     dependency: transitive
     description: flutter

lib/linear_percent_indicator.dart

@@ -15,7 +15,11 @@ class LinearPercentIndicator extends StatefulWidget {
   final Color fillColor;
 
   ///First color applied to the complete line
-  final Color backgroundColor;
+  Color get backgroundColor => _backgroundColor;
+  late Color _backgroundColor;
+
+  ///First color applied to the complete line
+  final LinearGradient? linearGradientBackgroundColor;
 
   Color get progressColor => _progressColor;
 
@@ -85,7 +89,8 @@ class LinearPercentIndicator extends StatefulWidget {
     this.percent = 0.0,
     this.lineHeight = 5.0,
     this.width,
-    this.backgroundColor = const Color(0xFFB8C7CB),
+    Color? backgroundColor,
+    this.linearGradientBackgroundColor,
     this.linearGradient,
     Color? progressColor,
     this.animation = false,
@@ -112,6 +117,12 @@ class LinearPercentIndicator extends StatefulWidget {
     }
     _progressColor = progressColor ?? Colors.red;
 
+    if (linearGradientBackgroundColor != null && backgroundColor != null) {
+      throw ArgumentError(
+          'Cannot provide both linearGradientBackgroundColor and backgroundColor');
+    }
+    _backgroundColor = backgroundColor ?? Color(0xFFB8C7CB);
+
     if (percent < 0.0 || percent > 1.0) {
       throw new Exception("Percent value must be a double between 0.0 and 1.0");
     }
@@ -241,6 +252,8 @@ class _LinearPercentIndicatorState extends State<LinearPercentIndicator>
               progressColor: widget.progressColor,
               linearGradient: widget.linearGradient,
               backgroundColor: widget.backgroundColor,
+              linearGradientBackgroundColor:
+                  widget.linearGradientBackgroundColor,
               linearStrokeCap: widget.linearStrokeCap,
               lineWidth: widget.lineHeight,
               maskFilter: widget.maskFilter,
@@ -307,6 +320,7 @@ class LinearPainter extends CustomPainter {
   final Color backgroundColor;
   final LinearStrokeCap? linearStrokeCap;
   final LinearGradient? linearGradient;
+  final LinearGradient? linearGradientBackgroundColor;
   final MaskFilter? maskFilter;
   final bool clipLinearGradient;
 
@@ -320,6 +334,7 @@ class LinearPainter extends CustomPainter {
     this.linearGradient,
     this.maskFilter,
     required this.clipLinearGradient,
+    this.linearGradientBackgroundColor,
   }) {
     _paintBackground.color = backgroundColor;
     _paintBackground.style = PaintingStyle.stroke;
@@ -350,6 +365,12 @@ class LinearPainter extends CustomPainter {
     if (maskFilter != null) {
       _paintLine.maskFilter = maskFilter;
     }
+    if (linearGradientBackgroundColor != null) {
+      Offset shaderEndPoint =
+          clipLinearGradient ? Offset.zero : Offset(size.width, size.height);
+      _paintBackground.shader = linearGradientBackgroundColor
+          ?.createShader(Rect.fromPoints(Offset.zero, shaderEndPoint));
+    }
 
     if (isRTL) {
       final xProgress = size.width - size.width * progress;

percent_indicator.iml

@@ -1,19 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="android" name="Android">
+      <configuration />
+    </facet>
+  </component>
   <component name="NewModuleRootManager" inherit-compiler-output="true">
     <exclude-output />
     <content url="file://$MODULE_DIR$">
       <sourceFolder url="file://$MODULE_DIR$/lib" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" />
+      <sourceFolder url="file://$MODULE_DIR$/gen" isTestSource="false" generated="true" />
       <excludeFolder url="file://$MODULE_DIR$/.dart_tool" />
       <excludeFolder url="file://$MODULE_DIR$/.idea" />
       <excludeFolder url="file://$MODULE_DIR$/.pub" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.dart_tool" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.pub" />
+      <excludeFolder url="file://$MODULE_DIR$/example/build" />
     </content>
-    <orderEntry type="jdk" jdkName="Android API 25 Platform" jdkType="Android SDK" />
+    <orderEntry type="jdk" jdkName="Android API 29 Platform" jdkType="Android SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="Dart Packages" level="project" />
     <orderEntry type="library" name="Dart SDK" level="project" />
     <orderEntry type="library" name="Flutter Plugins" level="project" />
+    <orderEntry type="library" name="Dart Packages" level="project" />
   </component>
 </module>