gi097 / flutter_clickable_regions

Clickable regions from SVG images in Flutter

Flutter clickable SVG regions (Interactive Map)

This is a simple application which displays an SVG image with clickable regions. It displays all the provinces from The Netherlands. When you click on it, it will highlight the clicked province.

Getting Started

Get an SVG and open it in a text editor. In this example, we are using the SVG image from https://mapsvg.com/maps/netherlands/.

The file will show several <path></path> entries. You need to add these manually in all the @SvgPath annotations.

After adding the annotations, you can run the below command to generate the needed Path objects.

flutter packages pub run build_runner build

Known issues

Some provinces are not clickable. This is an issue of the SVG being used.

Screenshot

Author

Giovanni Terlingen [email protected]

flutter_clickable_regions's Issues

undefined name issue

I wanna run the example after I ran the command 'flutter packages pub run build_runner build' in the terminal.
there are several errors show in the line of 'static Path get noordBrabant => $MapSvgData_noordBrabant;'
and the error tips said that"undefined name '$MapSvgData_noordBrabant',
do you know what else I can do? Thanks

Error in map_svg_data.dart class

Hey,

I am new to flutter. Can you give me some advise please?

In the map_svg_data.dart class there is an error at the line 8
part 'map_svg_data.svg_path.g.dart';

The error is:
Target of URI hasn't been generated: 'map_svg_data.svg_path.g.dart

How can I handle that? Sorry for that rookie question.

Thanks in advance

change the map

hi there , i'm trying to apply this concept for another country's map , apparently when i change all the information and apply the build command the generated file still gets the Netherlands map regions name ? is there anything i can do about that ?

All path are like drawn on same position

Hi I have tried to modified and insert my own paths. All works fine except that the path like all drawn on one position and some are over lapping. They supose to be like from top to bottom. How to overcome that?

Some provinces are not clicked.

build_run do not work.

I trie your example but do not work

`
NoSuchMethodError: The getter 'futureDynamicType' was called on null.
Receiver: null
Tried calling: futureDynamicType
dart:core Object.noSuchMethod
package:analyzer/src/dart/element/element.dart 7120:40 LibraryElementImpl.createLoadLibraryFunctionForLibrary
package:analyzer/src/dart/element/element.dart 6968:9 LibraryElementImpl.createLoadLibraryFunction
package:analyzer/src/summary/resynthesize.dart 332:24 SummaryResynthesizer.getLibraryElement.
dart:collection _LinkedHashMapMixin.putIfAbsent
package:analyzer/src/summary/resynthesize.dart 320:36 SummaryResynthesizer.getLibraryElement
package:analyzer/src/summary/resynthesize.dart 382:20 SummaryResynthesizer._buildTypeProvider
package:analyzer/src/summary/resynthesize.dart 180:5 new SummaryResynthesizer
package:analyzer/src/summary/package_bundle_reader.dart 340:9 new StoreBasedSummaryResynthesizer
package:analyzer/src/summary/package_bundle_reader.dart 320:26 ResynthesizerResultProvider.createResynthesizer
package:analyzer/src/summary/package_bundle_reader.dart 79:5 new InputPackagesResultProvider
package:analyzer/src/dart/sdk/sdk.dart 98:19 AbstractDartSdk.context
package:analyzer/src/context/context.dart 1975:46 PartitionManager.forSdk
package:analyzer/src/context/context.dart 744:50 AnalysisContextImpl.createCacheFromSourceFactory.createCache
package:analyzer/src/context/context.dart 749:38 AnalysisContextImpl.createCacheFromSourceFactory
package:analyzer/src/context/context.dart 476:14 AnalysisContextImpl.sourceFactory=
package:build_resolvers/src/resolver.dart 91:14 new AnalyzerResolver
package:build_resolvers/src/resolver.dart 435:32 new AnalyzerResolvers
package:build_runner_core/src/generate/options.dart 130:23 BuildOptions.create
package:build_runner/src/generate/build.dart 78:36 build
package:build_runner/src/entrypoint/build.dart 28:24 BuildCommand.run
package:args/command_runner.dart 197:27 CommandRunner.runCommand
package:args/command_runner.dart 112:25 CommandRunner.run.
dart:async new Future.sync
package:args/command_runner.dart 112:14 CommandRunner.run
package:build_runner/src/entrypoint/run.dart 22:31 run
.dart_tool/build/entrypoint/build.dart 18:22 main

pub finished with exit code 1
`

Building the @SvgPath and invoke the SvgPathGenerator dynamically

Hi,

First of all I wanna praise this brilliant work! Amazing!

I have a project where the app will get different SVG files and the app needs to make the areas clickable in the app. Thus it needs to be able to parse the SVG file and make it into that @svgpath then automatically invoke the SvgPathGenerator to make that 'map_svg_data.svg_path.g.dart' file.

Any pointers will be very much appreciated.. Thank you so much!!