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

Author

• Uğur Can Göker