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

Basic usage (rendering SVG from asset folder):

        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,
            isMultiSelectable: false,
            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),


          ),
        )

Network usage (rendering SVG from an URL):

          InteractableSvg.network(
            svgAddress: "www.example.com",
            fileName: "/floor_map.svg",
            .
            .
          ),
        

String usage (rendering SVG from a String):

          InteractableSvg.string(
            svgAddress: "<svg> </svg>",
          
            .
            .
          ),
        

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" />;

To select a region without clicking on the SVG see the below code.For better understanding check the example.

final GlobalKey<InteractableSvgState> key = GlobalKey();
InteractableSvg(
      key: mapKey,...)

key.currentState?.toggleButton(region);
key.currentState?.holdButton(region);

Props

Author

• Hussein Copol