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,
                ),

            )
          ],
        )
      ),
    );
  }
}

For more information, check out the links below:

Libraries

svgator_player_flutter