Flutter SVG动画播放插件svgator_player_flutter的使用

Flutter SVG动画播放插件svgator_player_flutter的使用

插件介绍

SVGator’s animation player implementation for Flutter. 该插件用于在Flutter中播放SVG动画。

使用步骤

1. 下载您的动画项目，从SVGator获取（使用External播放器选项）。
2. 将.dart文件复制到您的项目中（放入主lib目录或子目录）
3. 导入文件（导入类和状态以供API使用）

动画大小

除非指定尺寸参数，否则动画SVG组件将填充可用空间。如果组件加载在一个可滚动容器中（如ListView），则可能需要提供height参数。

示例代码

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](/user/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,
                ),
            )
          ],
        ),
      ),
    );
  }
}

更多信息

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

示例代码示例

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

import 'dart:convert';

import './Parts.dart';
import './EventLog.dart';
import './MediaButtons.dart';

import './Test-Robot.dart' as SVGator show TestRobot, TestRobotState;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SVGator - Mobile Player API',
      theme: ThemeData(
        primarySwatch: MaterialColor(svgatorBlue, svgatorBlueMaterial),
      ),
      home: const MyHomePage(title: 'SVGator - Mobile Player API'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String _url = 'https://www.svgator.com/help/getting-started/svgator-player-js-api';
  GlobalKey<EventLogState> _eventLog = GlobalKey<EventLogState>();
  GlobalKey<SVGator.TestRobotState>? _SVGatorPlayer = GlobalKey<SVGator.TestRobotState>();

  void _eventListener([String? message]) {
    final data = jsonDecode(message ?? '{}');
    _eventLog.currentState?.updateLog(data['event'] ?? '', data['offset']);
  }

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

  void _launchURL() async {
    if (!await launch(_url)) throw 'Could not launch $_url';
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:
        Center(
          child: ListView(
              padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
              children: <Widget>[
                logo(),
                logTitle('Svgator Player API - Event Log:', context),
                EventLog(
                  key: _eventLog,
                ),
                SVGator.TestRobot(
                  height: 310,
                  key: _SVGatorPlayer,
                  onMessage: _eventListener,
                ),
                MediaButtons(
                  parentAction: _runCommand,
                ),
                TextButton(
                  onPressed: _launchURL,
                  child: const Text(
                      "Tap here to see SVGator's Full API documentation.",
                      style: TextStyle(
                          color: Color(0xFF2f95dc),
                          fontFamily: 'space-mono',
                          fontSize: 14,
                      ),
                  ),
                ),
              ],
          )
        ),
    );
  }
}