Skip to content

polyline with gradient #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johnpryan merged 4 commits into from
Jan 7, 2020
Merged

polyline with gradient #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0b72df1
add polyline with gradient
SebWojd Oct 21, 2019
5709bcc
resolve gradientColors empty case
Jan 7, 2020
b01d0f4
code formatting
Jan 7, 2020
8232f54
code foramtting
SebWojd Jan 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion example/lib/pages/polyline.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ class PolylinePage extends StatelessWidget {
LatLng(53.3498, -6.2603),
LatLng(48.8566, 2.3522),
];

var pointsGradient = <LatLng>[
LatLng(55.5, -0.09),
LatLng(54.3498, -6.2603),
LatLng(52.8566, 2.3522),
];

return Scaffold(
appBar: AppBar(title: Text('Polylines')),
drawer: buildDrawer(context, PolylinePage.route),
Expand Down Expand Up @@ -43,7 +50,20 @@ class PolylinePage extends StatelessWidget {
strokeWidth: 4.0,
color: Colors.purple),
],
)
),
PolylineLayerOptions(
polylines: [
Polyline(
points: pointsGradient,
strokeWidth: 4.0,
gradientColors: [
Color(0xffE40203),
Color(0xffFEED00),
Color(0xff007E2D),
],
),
],
),
],
),
),
Expand Down
33 changes: 32 additions & 1 deletion lib/src/layer/polyline_layer.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'package:latlong/latlong.dart';

class PolylineLayerOptions extends LayerOptions {
final List<Polyline> polylines;

PolylineLayerOptions({this.polylines = const [], rebuild})
: super(rebuild: rebuild);
}
Expand All @@ -19,13 +20,18 @@ class Polyline {
final Color color;
final double borderStrokeWidth;
final Color borderColor;
final List<Color> gradientColors;
final List<double> colorsStop;
final bool isDotted;

Polyline({
this.points,
this.strokeWidth = 1.0,
this.color = const Color(0xFF00FF00),
this.borderStrokeWidth = 0.0,
this.borderColor = const Color(0xFFFFFF00),
this.gradientColors,
this.colorsStop,
this.isDotted = false,
});
}
Expand Down Expand Up @@ -85,6 +91,7 @@ class PolylineLayer extends StatelessWidget {

class PolylinePainter extends CustomPainter {
final Polyline polylineOpt;

PolylinePainter(this.polylineOpt);

@override
Expand All @@ -95,12 +102,19 @@ class PolylinePainter extends CustomPainter {
final rect = Offset.zero & size;
canvas.clipRect(rect);
final paint = Paint()
..color = polylineOpt.color
..strokeWidth = polylineOpt.strokeWidth
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round
..blendMode = BlendMode.src;

if (polylineOpt.gradientColors == null) {
Copy link
Collaborator

@johnpryan johnpryan Dec 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to also handle the isEmpty case

paint.color = polylineOpt.color;
} else {
polylineOpt.gradientColors.isNotEmpty
? paint.shader = _paintGradient()
: paint.color = polylineOpt.color;
}

final filterPaint = Paint()
..color = polylineOpt.borderColor.withAlpha(255)
..strokeWidth = polylineOpt.strokeWidth
Expand Down Expand Up @@ -177,6 +191,23 @@ class PolylinePainter extends CustomPainter {
}
}

ui.Gradient _paintGradient() => ui.Gradient.linear(polylineOpt.offsets.first,
polylineOpt.offsets.last, polylineOpt.gradientColors, _getColorsStop());

List<double> _getColorsStop() => (polylineOpt.colorsStop != null &&
polylineOpt.colorsStop.length == polylineOpt.gradientColors.length)
? polylineOpt.colorsStop
: _calculateColorsStop();

List<double> _calculateColorsStop() {
final colorsStopInterval = 1.0 / polylineOpt.gradientColors.length;
return polylineOpt.gradientColors
.map((gradientColor) =>
polylineOpt.gradientColors.indexOf(gradientColor) *
colorsStopInterval)
.toList();
}

@override
bool shouldRepaint(PolylinePainter other) => false;
}
Expand Down