FlareActor will run when the The RenderBox detach

[HaoliangHsiao]

FlareActor will be run when FlareActorRenderObject be detach (not dispose). The schedule need to stop when FlareActorRenderObject detach. Thank you.

@OverRide
void attach(PipelineOwner owner) {
super.attach(owner);
// start schedule
}

@OverRide
void detach() {
super.detach();
// stop schedule
}

[luigi-rosso]

What's the use case/flow you're using that's triggering a detach but not a dispose? I'd like to be able to test this condition.

Is it related to navigation?

[luigi-rosso]

In the meantime I have pushed a fix for this and have updated the package on pub as well. Please let me know the workflow to trigger a test case for this.

[HaoliangHsiao]

@luigi-rosso, About this issue. This is flutter behavior.
Pages on Navigator stack rebuild when a new page is pushed#11655
FlareActor will be rebuilding after navigator to another page.
For the performance, The developer needs to pause the FlareActor when going to another page and resume FlareActor when back.

This is Penguin demo.

class _MyHomePageState extends State<MyHomePage> implements FlareController {
  double _rockAmount = 0.5;
  double _speed = 1.0;
  double _rockTime = 0.0;
  bool _isPaused = false;

  ActorAnimation _rock;

  void initialize(FlutterActorArtboard artboard) {
    _rock = artboard.getAnimation("music_walk");
  }

  void setViewTransform(Mat2D viewTransform) {}

  bool advance(FlutterActorArtboard artboard, double elapsed) {
    print("advance ");
    _rockTime += elapsed * _speed;
    _rock.apply(_rockTime % _rock.duration, artboard, _rockAmount);
    return true;
  }

  @override
  void dispose() {
    print("dispose ");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(title: new Text(widget.title)),
      body: new Stack(
        children: [
          Positioned.fill(
              child: FlareActor("assets/Penguin.flr",
                  alignment: Alignment.center,
                  isPaused: _isPaused,
                  fit: BoxFit.cover,
                  animation: "walk",
                  controller: this)),
          Positioned.fill(
              child: new Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                Container(
                    height: 220,
                    color: Colors.black.withOpacity(0.5),
                    child: new Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        new Text("Mix Amount",
                            style: TextStyle(color: Colors.white)),
                        new Slider(
                          value: _rockAmount,
                          min: 0.0,
                          max: 1.0,
                          divisions: null,
                          onChanged: (double value) {
                            setState(() {
                              _rockAmount = value;
                            });
                          },
                        ),
                        new Text("Speed",
                            style: TextStyle(color: Colors.white)),
                        new Slider(
                          value: _speed,
                          min: 0.2,
                          max: 3.0,
                          divisions: null,
                          onChanged: (double value) {
                            setState(() {
                              _speed = value;
                            });
                          },
                        ),
                        new Text("Paused",
                            style: TextStyle(color: Colors.white)),
                        new Checkbox(
                          value: _isPaused,
                          onChanged: (bool value) {
                            setState(() {
                              _isPaused = value;
                            });
                          },
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: 10.0),
                          child: RaisedButton(
                            onPressed: () {
                              _isPaused = true;
                              _openPage();
                            },
                            child: Text("Next Page"),
                          ),
                        )
                      ],
                    )),
              ]))
        ],
      ),
    );
  }

  _openPage() async {
    var result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NextPage()),
    );
    _isPaused = false;
  }
}

[luigi-rosso]

Thanks for the example! Are still seeing this issue with the latest Flare-Flutter update?

[HaoliangHsiao]

@luigi-rosso, This issue still happened on Flutter v1.1.4