ucg_interactable_svg 1.0.0

Flutter package to interact with different regions of an 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:
  ...
  ucg_interactable_svg: any

In your library file add the following import:

import 'package:ucg_interactable_svg/interactable_svg/src/widgets/interactable_svg.dart';

Usage

        InteractiveViewer(
          child:InteractableSvg(
            svgAddress: "<svg> </svg>",
            onChanged: (region) {
              setState(() {
                selectedRegion = region;
              });
            },
            width: double.infinity,
            height: double.infinity,
          ),
        )

for svg path example:
  <path id="118" title="room 9" class="st0" d="M55 508h101.26v330H55Z" fill="#000000" style="fill:rgb(0, 0, 0)" />;

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

Props

props	types	description
key	Key?
svgAddress	String	Address of an SVG like svg tags
width	double?	SVG width. Default value is double.infinity
onChanged	Function(Region? region)	Returns new region value when it changed
selectedColor	Color	Selected svg path color

Author

• Uğur Can Göker