ucg_interactable_svg

Creator: coderz1093

Last updated:

0 purchases

ucg_interactable_svg Image
ucg_interactable_svg Images
Add to Cart

Description:

ucg interactable svg

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
copied to clipboard
In your library file add the following import:
import 'package:ucg_interactable_svg/interactable_svg/src/widgets/interactable_svg.dart';
copied to clipboard
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);
}
},

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

copied to clipboard
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


isMultiSelectable
bool
Select more than one region default value is null


unSelectableIds
List<int>
Select more than one region


unSelectableColor
Color?
Disabled color for unselectable region


unSelectableText
String?
The message you want returned to you in the title when clicked for the unselectable region



Author #

Uğur Can Göker

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Files In This Product:

Customer Reviews

There are no reviews.