Description:

svgator player flutter

svgator_player_flutter #
SVGator's animation player implementation for Flutter.
Getting Started #

Download you animated project for flutter from SVGator (using External player option)
Copy the .dart file into your project (into your main lib directory or into a subdirectory)
import the file (both class & state for API usage)

Size #
Unless sizes are specified as a parameter, the animated SVG component will fill in the available space. Under some circumstances though, if the component is loaded in a scrollable container (i.e. ListView) one might be needed to provide a height parameter.
Usage #
Find an example below of SVGator animation implemented in flutter.
Please note that Test-Robot.dart should be the file exported from SVGator.
Pass your callback in the onMessage property to SVGator's component to capture Player Events & call SVGatorPlayer?.currentState?.runCommand(command, param) to control the animation.
import './Test-Robot.dart' as SVGator show TestRobot, TestRobotState;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
GlobalKey<SVGator.TestRobotState>? _SVGatorPlayer = GlobalKey<SVGator.TestRobotState>();

void _eventListener([String? message]) {
print("Message received: $message");
}

void _runCommand(String command, int? param) {
_SVGatorPlayer?.currentState?.runCommand(command, param);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: Column(
children: [
Expanded(
child: SVGator.TestRobot(
height: 310,
key: _SVGatorPlayer,
onMessage: _eventListener,
),

)
],
)
),
);
}
}

copied to clipboard
Useful Links #
For more information, check out the links below:

SVGator API - Flutter Test App
SVGator Player JS API Documentation
Animate Programatically with SVGator
Export Flutter Animations with SVGator

License

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

Share

• Share on Facebook
• Share on Twitter