How can I expose a StatefulWidget's method?

Question

Say I want to build a StatefulWidget named MySlideWidget that provides a public instance method: animate().

When I press a button on parent of MySlideWidget, then I can call MySlideWidget's animate() method to trigger an internal SlideTransition of MySlideWidget.

The usage would look like this:

class MySlideWidgetDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    MySlideWidget mySlideWidget = new MySlideWidget();

    return new Scaffold(
        body: mySlideWidget,
        floatingActionButton: new FloatingActionButton(
          onPressed: () {
            mySlideWidget.animate();
          },
          tooltip: 'Start',
          child: new Icon(Icons.add),
        ));
  }
}

What I wondering is how to encapsulate the implementations of AnimationController and _controller.forward() inside MySlideWidget, so user of MySlideWidget can simply call animate().

Is this possible? Or what is the idea way to do encapsulation in Flutter?

Answer 1

You should use AnimationController and pass it to SlideTransition. Then call controller.forward() when needed.

Here is sample:

    class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  AnimationController _controller;
  Animation<FractionalOffset> _slideTransitionPosition;

  @override
  initState() {
    super.initState();

    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2000),
    );

    _slideTransitionPosition = new FractionalOffsetTween(
      begin: const FractionalOffset(0.0, -1.0),
      end: const FractionalOffset(0.0, 10.0),
    ).animate(new CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    ));
  }

  void _onPress() {
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new SlideTransition(
          position: _slideTransitionPosition,
          child: new Container(
            color: Colors.red,
            width: 100.0,
            height: 100.0,
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _onPress,
        tooltip: 'Start',
        child: new Icon(Icons.add),
      ),
    );
  }
}

Also you can find examples in demos