How to toggle Flare Animation? - animation

Question

I am trying to show the following flare animation in my Flutter App
https://www.2dimensions.com/a/pollux/files/flare/smiley-switch
I downloaded it as binary
FlareActor(
"assets/Smiley Switch.flr",
color: Colors.black,
fit: BoxFit.contain,
animation: "On",
),
I want the animation to toggle from on to off just like a switch widget so i wrapped it inside a 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",
),
),
);
but the above code does not work. How to toggle the animation of FlareActor?

Answer 1

Double check if you declared your flare file (.flr) in pubspec.yaml
Below is a working example
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",
),
))
],
),
));
}
}