dholasain/interactable_svg

A flutter package for interact with different parts of a SVG.

interactable SVG

A flutter package for interacting with different parts of an SVG.

Getting Started

In the pubspec.yaml of your Flutter project, add the following dependency:

dependencies:
  ...
  interactable_svg: any

In your library file add the following import:

import 'package:interactable_svg/interactable_svg/interactable_svg.dart';

Usage

        InteractiveViewer(
          scaleEnabled: true,
          panEnabled: true,
          constrained: true,
          child:InteractableSvg(
            svgAddress: "assets/floor_map.svg",
            onChanged: (region) {
              setState(() {
                selectedRegion = region;

              });
            },

            width: double.infinity,
            height: double.infinity,
            toggleEnable: true,
            dotColor: Colors.black,
            selectedColor: Colors.red.withOpacity(0.5),
            strokeColor: Colors.blue,
            unSelectableId: "bg",
            centerDotEnable:true ,
            centerTextEnable:true ,
            strokeWidth: 2.0,
            centerTextStyle: const TextStyle(fontSize: 12,color: Colors.black),


          ),
        )

Also your SVG must follow the following pattern.For better understanding see the example SVG.

'.* id="(.*)" name="(.*)" .* d="(.*)"'
for example:
  <path id="118" name="room 9" class="st0" d="M55 508h101.26v330H55Z" />;

Props

props	types	description
key	Key?
svgAddress	String	Address of an SVG like "assets/floor_map.svg"
width	double?	SVG width. Default value is double.infinity
height	double?	SVG height. Default value is double.infinity
strokeColor	Color?	Color of the region borders
selectedColor	Color?	Color of the selected region
strokeWidth	double?	Width of the region borders
toggleEnable	bool?	Region selecting act as like toggle button
onChanged	Function(Region? region)	Returns new region value when it changed
unSelectableId	String?	Makes that region wi that id non selective
centerDotEnable	bool?	place a dot in the center of the region
centerTextEnable	bool?	place name of the region at the center of the region
centerTextStyle	TextStyle?	Style of name of the region
dotColor	Color?	Color of the dot in the center of the region

Author

• Hussein Copol