Skip to content

feat: add hit detection to Polylines #1728

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
JaffaKetchup merged 24 commits into from
Dec 15, 2023
Merged

feat: add hit detection to Polylines #1728

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
8b2b763
Add an onTap callback to polylines.
ignatz Nov 9, 2023
84fcb53
Merge branch 'master' into polyline_tap
JaffaKetchup Dec 6, 2023
b55d499
Remove `PolylineLayer.interactive` argument, and calculate it automat…
JaffaKetchup Dec 6, 2023
f75abfc
Added `onTapTolerance`
JaffaKetchup Dec 6, 2023
bd7dd5e
Add handling for taps on multiple `Polyline`s
JaffaKetchup Dec 7, 2023
9420c85
Merge branch 'master' into polyline_tap
JaffaKetchup Dec 7, 2023
b7ee085
Added support for long presses and secondary taps
JaffaKetchup Dec 7, 2023
c714177
Merge branch 'master' into polyline_tap
josxha Dec 8, 2023
d49e372
Merge branch 'master' into polyline_tap
josxha Dec 10, 2023
66ebe10
Merge branch 'master' into polyline_tap
josxha Dec 10, 2023
72f3f18
Merge branch 'master' into polyline_tap
JaffaKetchup Dec 12, 2023
de17f41
Fix minor documentation mistake
JaffaKetchup Dec 12, 2023
88830ff
Simplified example changes
JaffaKetchup Dec 12, 2023
f820807
Use "occlude" instead of "obscure"
JaffaKetchup Dec 12, 2023
6a80c32
Pass entire `Polyline` object through in handler callbacks, instead o…
JaffaKetchup Dec 12, 2023
d1f525f
Merge branch 'master' into polyline_tap
JaffaKetchup Dec 12, 2023
1fd6e6d
Implement new base-only hit detection API
JaffaKetchup Dec 13, 2023
7f586c2
Improved example application
JaffaKetchup Dec 13, 2023
908f0dd
Minor improvements from review
JaffaKetchup Dec 13, 2023
7954ba2
Remove `hitKey` and generic typing
JaffaKetchup Dec 14, 2023
403d837
Replace `hitTolerance` with `minimumHitbox`
JaffaKetchup Dec 14, 2023
5eec211
Remove remaining reference to `Polyline.hitKey`
JaffaKetchup Dec 14, 2023
3ef7ee3
Revert `polylines` type to `List` from `Iterable`
JaffaKetchup Dec 15, 2023
fb9751d
Paint hover lines on top in polyline example
JaffaKetchup Dec 15, 2023
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
130 changes: 116 additions & 14 deletions example/lib/pages/polyline.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ class PolylinePage extends StatefulWidget {
State<PolylinePage> createState() => _PolylinePageState();
}

typedef _TapKeyType = ({String title, String subtitle});

class _PolylinePageState extends State<PolylinePage> {
@override
Widget build(BuildContext context) {
Expand All @@ -26,16 +28,49 @@ class _PolylinePageState extends State<PolylinePage> {
),
children: [
openStreetMapTileLayer,
PolylineLayer(
PolylineLayer<_TapKeyType>(
onTap: (tappedLineKeys, coords) => _openTappedLinesModal(
0,
tappedLineKeys,
'(${coords.latitude.toStringAsFixed(6)}, ${coords.longitude.toStringAsFixed(6)})',
),
onLongPress: (tappedLineKeys, coords) => _openTappedLinesModal(
1,
tappedLineKeys,
'(${coords.latitude.toStringAsFixed(6)}, ${coords.longitude.toStringAsFixed(6)})',
),
onSecondaryTap: (tappedLineKeys, coords) => _openTappedLinesModal(
2,
tappedLineKeys,
'(${coords.latitude.toStringAsFixed(6)}, ${coords.longitude.toStringAsFixed(6)})',
),
polylines: [
Polyline(
points: [
const LatLng(51.5, -0.09),
const LatLng(53.3498, -6.2603),
const LatLng(48.8566, 2.3522),
],
strokeWidth: 4,
color: Colors.purple,
strokeWidth: 8,
color: const Color(0xFF60399E),
tapKey: (
title: 'Elizabeth Line',
subtitle: 'Nothing really special here...',
),
),
Polyline(
points: [
const LatLng(48.5, -3.09),
const LatLng(47.3498, -9.2603),
const LatLng(43.8566, -1.3522),
],
strokeWidth: 16000,
color: Colors.pink,
useStrokeWidthInMeter: true,
tapKey: (
title: 'Pink Line',
subtitle: 'Fixed radius in meters instead of pixels',
),
),
Polyline(
points: [
Expand All @@ -49,6 +84,10 @@ class _PolylinePageState extends State<PolylinePage> {
const Color(0xffFEED00),
const Color(0xff007E2D),
],
tapKey: (
title: 'Traffic Light Line',
subtitle: 'Fancy gradient instead of a solid color',
),
),
Polyline(
points: [
Expand All @@ -60,6 +99,11 @@ class _PolylinePageState extends State<PolylinePage> {
color: Colors.blue.withOpacity(0.6),
borderStrokeWidth: 20,
borderColor: Colors.red.withOpacity(0.4),
tapKey: (
title: 'BlueRed Line',
subtitle:
'Solid translucent color fill, with different color outline',
),
),
Polyline(
points: [
Expand All @@ -71,6 +115,11 @@ class _PolylinePageState extends State<PolylinePage> {
color: Colors.black.withOpacity(0.2),
borderStrokeWidth: 20,
borderColor: Colors.white30,
tapKey: (
title: 'BlackWhite Line',
subtitle:
'Solid translucent color fill, with different color outline',
),
),
Polyline(
points: [
Expand All @@ -82,22 +131,75 @@ class _PolylinePageState extends State<PolylinePage> {
color: Colors.yellow,
borderStrokeWidth: 10,
borderColor: Colors.blue.withOpacity(0.5),
),
Polyline(
points: [
const LatLng(48.1, -0.03),
const LatLng(50.5, -7.8),
const LatLng(56.5, 0.4),
],
strokeWidth: 10,
color: Colors.amber,
borderStrokeWidth: 10,
borderColor: Colors.blue.withOpacity(0.5),
tapKey: (
title: 'YellowBlue Line',
subtitle:
'Solid translucent color fill, with different color outline',
),
),
],
),
],
),
);
}

void _openTappedLinesModal(
int mode,
List<_TapKeyType> tappedLineKeys,
String coords,
) {
showModalBottomSheet<void>(
context: context,
builder: (context) => Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Tapped Polyline(s)',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Text(
'${[
'Tapped',
'Long-pressed/held',
'Secondary-tapped/alternative-clicked'
][mode]} at point: $coords',
),
const SizedBox(height: 8),
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
final tappedLineKey = tappedLineKeys.elementAt(index);
return ListTile(
leading: index == 0
? const Icon(Icons.vertical_align_top)
: index == tappedLineKeys.length - 1
? const Icon(Icons.vertical_align_bottom)
: const SizedBox.shrink(),
title: Text(tappedLineKey.title),
subtitle: Text(tappedLineKey.subtitle),
dense: true,
);
},
itemCount: tappedLineKeys.length,
),
),
const SizedBox(height: 8),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: double.infinity,
child: OutlinedButton(
onPressed: () => Navigator.pop(context),
child: const Text('Close'),
),
),
),
],
),
),
);
}
}
Loading