UCG 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

        Padding(
        padding: const EdgeInsets.symmetric(vertical: 12),
        child: InteractiveViewer(
          child: UcgInteractableSvg(
            svgAddress: '<svg> </svg>',
            width: double.infinity,
            height: double.infinity,
            unSelectableColor: (int partId, Color? defaultColor) {
              if (partId == yourUnSelectableId) {
                return Colors.red;
              }
              return null;
            },
            unSelectableText: (int partId, String? defaultTitle) {
              if (partId == yourUnSelectableId) {
                return 'this region is unselectable';
              }
              return null;
            },
            selectedColor: Colors.black,
            isMultiSelectable: false,
            onChanged: (region) {
              if (region.title != null) {
                unawaited(showPlatformAlert(context, ModelAlertDialog(description: region.title!)));
                return;
              }
              if ((int.tryParse(region.id) ?? 0) != 0) {
                onSelected(int.tryParse(region.id) ?? 0);
              }
            },
            
          ),
        ),
      );

for svg path example:
  <path id="118" title="room 9" 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