Skip to content

Commit f886cc6

Browse files
committed
add polyline with gradient
1 parent 5322542 commit f886cc6

File tree

2 files changed

+52
-2
lines changed

2 files changed

+52
-2
lines changed

example/lib/pages/polyline.dart

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@ class PolylinePage extends StatelessWidget {
1414
LatLng(53.3498, -6.2603),
1515
LatLng(48.8566, 2.3522),
1616
];
17+
18+
var pointsGradient = <LatLng>[
19+
LatLng(55.5, -0.09),
20+
LatLng(54.3498, -6.2603),
21+
LatLng(52.8566, 2.3522),
22+
];
23+
1724
return Scaffold(
1825
appBar: AppBar(title: Text('Polylines')),
1926
drawer: buildDrawer(context, PolylinePage.route),
@@ -43,7 +50,20 @@ class PolylinePage extends StatelessWidget {
4350
strokeWidth: 4.0,
4451
color: Colors.purple),
4552
],
46-
)
53+
),
54+
PolylineLayerOptions(
55+
polylines: [
56+
Polyline(
57+
points: pointsGradient,
58+
strokeWidth: 4.0,
59+
gradientColors: [
60+
Color(0xffE40203),
61+
Color(0xffFEED00),
62+
Color(0xff007E2D),
63+
],
64+
),
65+
],
66+
),
4767
],
4868
),
4969
),

lib/src/layer/polyline_layer.dart

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,17 @@ class Polyline {
1919
final Color color;
2020
final double borderStrokeWidth;
2121
final Color borderColor;
22+
final List<Color> gradientColors;
23+
final List<double> colorsStop;
2224
final bool isDotted;
2325
Polyline({
2426
this.points,
2527
this.strokeWidth = 1.0,
2628
this.color = const Color(0xFF00FF00),
2729
this.borderStrokeWidth = 0.0,
2830
this.borderColor = const Color(0xFFFFFF00),
31+
this.gradientColors,
32+
this.colorsStop,
2933
this.isDotted = false,
3034
});
3135
}
@@ -85,6 +89,7 @@ class PolylineLayer extends StatelessWidget {
8589

8690
class PolylinePainter extends CustomPainter {
8791
final Polyline polylineOpt;
92+
8893
PolylinePainter(this.polylineOpt);
8994

9095
@override
@@ -95,12 +100,17 @@ class PolylinePainter extends CustomPainter {
95100
final rect = Offset.zero & size;
96101
canvas.clipRect(rect);
97102
final paint = Paint()
98-
..color = polylineOpt.color
99103
..strokeWidth = polylineOpt.strokeWidth
100104
..strokeCap = StrokeCap.round
101105
..strokeJoin = StrokeJoin.round
102106
..blendMode = BlendMode.src;
103107

108+
if (polylineOpt.gradientColors == null) {
109+
paint.color = polylineOpt.color;
110+
} else {
111+
paint.shader = _paintGradient();
112+
}
113+
104114
final filterPaint = Paint()
105115
..color = polylineOpt.borderColor.withAlpha(255)
106116
..strokeWidth = polylineOpt.strokeWidth
@@ -177,6 +187,26 @@ class PolylinePainter extends CustomPainter {
177187
}
178188
}
179189

190+
ui.Gradient _paintGradient() => ui.Gradient.linear(
191+
polylineOpt.offsets.first,
192+
polylineOpt.offsets.last,
193+
polylineOpt.gradientColors,
194+
_getColorsStop());
195+
196+
List<double> _getColorsStop() => (polylineOpt.colorsStop != null &&
197+
polylineOpt.colorsStop.length == polylineOpt.gradientColors.length)
198+
? polylineOpt.colorsStop
199+
: _calculateColorsStop();
200+
201+
List<double> _calculateColorsStop() {
202+
final colorsStopInterval = 1.0 / polylineOpt.gradientColors.length;
203+
return polylineOpt.gradientColors
204+
.map((gradientColor) =>
205+
polylineOpt.gradientColors.indexOf(gradientColor) *
206+
colorsStopInterval)
207+
.toList();
208+
}
209+
180210
@override
181211
bool shouldRepaint(PolylinePainter other) => false;
182212
}

0 commit comments

Comments
 (0)