Issue with flare and flutter

Question

Hello I tried to implement flare animation with slider in flutter. I create five key ( 1, 2, 3 ,4,5) who call specific flare animation who work great on flare editor, but when I launch the app I have trouble with some item of the animation who add offset or disepear, or appear, it's random...

I create a simple test with different shapes create with different tools of the flare editor circle ,hexagone, pen, and I currently a have trouble with shape create with pen tool, who deaspear or appear randomly.

flare version : flare_flutter: ^1.5.2

chronology of the gif
value=0.0 black shape is showed  // all is good
value=25.0 black shape is showed  // all is good
value=0.0 black shape disepear // not good
value=25.0 black shape disepear // not good
value=0.0 black shape disepear // not good
value=25.0 black shape disepear // not good

reload app
value=0.0 black shape is showed  // all is good
value=25.0 black shape is showed  // all is good

here is the example

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final FlareControls controls = FlareControls();
   double slidervalue;

   @override
  void initState() {
     slidervalue=0.0;
     controls.play("1");
     super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
        new Container (
        width:150,
            height: 150,
            child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle" , controller:controls,
            )
        ),
          Slider(
          value: slidervalue,
          min: 0,
          max: 100,
          divisions: 4,
          label: "$slidervalue",
          onChanged: (value) {
            setState(() {
              slidervalue = value;

              if(slidervalue==0.0){
                controls.play("1");
              }

              if(slidervalue==25){
                controls.play("2");
              }

              if(slidervalue==50){
                controls.play("3");
              }

              if(slidervalue==75){
                controls.play("4");
              }

              if (slidervalue==100){
                controls.play("5");
              }
            });
          },
        ),
      ],
        ),

      )
    );
  }
}

Here is an other observation with modification of the init origin if I interrupt animation with change state. I observe an offset of init origin in reference of the last position animation.. instead of restart the init origin

In this example I don't know why translation use last origin of rotation while rotation keep init origin on press.

In this last example why all is good the first time I press button, and the second time I loose translation axis ?

I post the issue in flare, but possibly I did thing wrong

Answer 1

My ugly solution. I use a stack for each key of flareactor, when slider change value, the key change and I make visible or not, the flareactor dependant of the key selected. Work but it's not beautifull...

final FlareControls _controls = FlareControls();
  final FlareControls _controls2 = FlareControls();
  final FlareControls _controls3 = FlareControls();
  final FlareControls _controls4 = FlareControls();
  final FlareControls _controls5 = FlareControls();

  bool visibilitanim1;
  bool visibilitanim2;
  bool visibilitanim3;
  bool visibilitanim4;
  bool visibilitanim5;

double slidervalue; 
  @override
  void initState() {
    slidervalue=0;
     visibilitanim1=true;
    visibilitanim2=false;
    visibilitanim3=false;
    visibilitanim4=false;
    visibilitanim5=false;
    super.initState();
  }





  void _changed(bool visibility, String field) {
    setState(() {

      if (field == "anim1"){
        visibilitanim1 = visibility;
      }

      if (field == "anim2"){
        visibilitanim2 = visibility;
      }
      if (field == "anim3"){
        visibilitanim3 = visibility;
      }
      if (field == "anim4"){
        visibilitanim4 = visibility;
      }
      if (field == "anim5"){
        visibilitanim5 = visibility;
      }


    });
  } //modifi


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
new Stack (
  children: <Widget>[
    visibilitanim1 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"1" , controller:_controls,
        )
    ) : Container(),
      visibilitanim2 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"2" , controller:_controls2,
        )
    ): Container(),
    visibilitanim3 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"3" , controller:_controls3,
        )
    ): Container(),
    visibilitanim4 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"4" , controller:_controls4,
        )
    ): Container(),
    visibilitanim5 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"5" , controller:_controls5,
        )
    ): Container(),
  ],
),

          Slider(
          value: slidervalue,
          min: 0,
          max: 100,
          divisions: 4,
          label: "$slidervalue",
          onChanged: (value) {
            setState(() {
              slidervalue = value;

              if(slidervalue==0.0){
                _changed(true, "anim1");
                _controls.play("1");
                _changed(false, "anim2");
                _changed(false, "anim3");
                _changed(false, "anim4");
                _changed(false, "anim5");
              }

              if(slidervalue==25){
               _changed(true, "anim2");
                _controls2.play("2");
                _changed(false, "anim1");
                _changed(false, "anim3");
                _changed(false, "anim4");
                _changed(false, "anim5");

              }

              if(slidervalue==50){
                _changed(true, "anim3");
                _controls3.play("3");
                _changed(false, "anim1");
                _changed(false, "anim2");
                _changed(false, "anim4");
                _changed(false, "anim5");
              }


              if(slidervalue==75){
                _changed(true, "anim4");
                _controls4.play("4");
                _changed(false, "anim1");
                _changed(false, "anim2");
                _changed(false, "anim3");
                _changed(false, "anim5");
              }

              if (slidervalue==100){
                _changed(true, "anim5");
                _controls5.play("5");
                _changed(false, "anim1");
                _changed(false, "anim2");
                _changed(false, "anim3");
                _changed(false, "anim4");
              }

            });
          },
        ),