Flutter¶
1. Add the Dependency¶
You need to add jujuba_svg library in your pubspec.yaml:
dependencies:
jujuba_svg: ^1.0.0
For Android, make sure your application has internet permission. This is required to run javascript commands.
// AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
2. Define your Commander¶
Let’s say you want to use the library in your my_beatiful_screen.dart. You need to initialize the controller:
class MyBeautifulScreen extends StatelessWidget {
final JujubaCommander commander = JujubaCommander();
//...
3. Declare the Widget to render the SVG¶
The library provides a widget called JujubaSVGWidget, there you can the commander, svgText, and onElementClick.
-
commander: allow you to send commands to manipulate the SVG; -
svgText: your SVG; -
onElementClick: callback to intercept click events in your SVG.
class MyBeautifulScreen extends StatelessWidget {
//...
@override
Widget build(BuildContext context) {
return Scaffold(
body: JujubaSVGWidget(
commander: commander,
svgText: svgText,
onElementClick: (nodeInfo) => {},
),
)
// ...
Don’t forget:
svgTextshould contain all content of your SVG file.