animation - 如何切换光斑动画？

Question

我正在尝试在我的 Flutter 应用程序中显示以下耀斑动画

https://www.2dimensions.com/a/pollux/files/flare/smiley-switch

我下载的是二进制文件

FlareActor(
        "assets/Smiley Switch.flr",
        color: Colors.black,
        fit: BoxFit.contain,
        animation: "On",
      ),

我希望动画像开关小部件一样从开到关切换，所以我将它包裹在 InkWell

中

 var a = false;

    return Center(
      child: InkWell(
        onTap: (){
            if(a){
              setState(() {
                a = false;
              });
            } else {
              setState(() {
                a = true;
              });
            }

        },
        child: FlareActor(
          "assets/Smiley Switch.flr",
          color: Colors.black,
          fit: BoxFit.contain,
          animation: a  ? "On" : "Off",
        ),
      ),
    );

但是上面的代码不起作用。如何切换FlareActor的动画？

Answer 1

1. 仔细检查您是否在 pubspec.yaml 中声明了 flare 文件 (.flr)

1. 下面是一个工作示例

import "package:flare_flutter/flare_actor.dart";
import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flare Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flare-Flutter'),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isOn = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(title: Text(widget.title)),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                  child: InkWell(
                onTap: () {
                  setState(() {
                    isOn = !isOn;
                  });
                },
                child: FlareActor(
                  "assets/flare/SmileySwitch.flr",
                  alignment: Alignment.center,
                  fit: BoxFit.contain,
                  animation: isOn ? "On" : "Off",
                ),
              ))
            ],
          ),
        ));
  }
}