dart – Flutter Nested Widget Callback / Async Questions

Not sure if the event will bubble up to the parent widget and trigger
the animation with all the nested widgets and callbacks.

In the Original files,

Pressing on a grandchild widget(e.g. FlatButton) of a BackWidget it
will trigger a ModalDialog call and pressing the button will make an
async call. The Flip Effect will take place at the end of a successful
async call.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
      home: new Container(color: Colors.white,child: new RootWidget())));
}

class RootWidget extends StatelessWidget {
  FlipWidget mainFlipWidget;

  @override
  Widget build(BuildContext context) {
    mainFlipWidget = new FlipWidget(
      frontWidget: frontWidget,backWidget: new BackWidget(
        onPressedButton: () {
          _flipMainButton();
        },),);
    return new Center(child:mainFlipWidget);
  }

  _flipMainButton() {
    mainFlipWidget.doTheFlip();
  }
}

class BackWidget extends StatefulWidget {
  BackWidget({
    this.onPressedButton,});

  final VoidCallback onPressedButton;
   Widget buttonFlipWidget;
  _BackWidgetState createState() => new _BackWidgetState();
}

class _BackWidgetState extends State<BackWidget> {

  @override
  Widget build(BuildContext context) {
    widget.buttonFlipWidget = new Container(
      height: 180.0,color: Colors.grey[200],child:new FlatButton(
        onPressed: () {
          triggerCb();
        },child: new Text('Press me'),);
    return widget.buttonFlipWidget;
  }

  triggerCb() {
      widget.onPressedButton();
  }
}

class FlipWidget extends StatefulWidget {
  FlipWidget({
    @required this.frontWidget,@required this.backWidget,});

  final Widget frontWidget;
  final Widget backWidget;
  final _FlipWidgetState _state = new _FlipWidgetState();

  doTheFlip () {
    _state.doTheFlip();
  }

  _FlipWidgetState createState() => _state;
}

class _FlipWidgetState extends State<FlipWidget> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _frontScale;
  Animation<double> _backScale;

  void initState() {
    super.initState();
    _controller = new AnimationController(vsync: this,duration: const Duration(milliseconds: 1500),);
    _frontScale = new Tween(
      begin: 1.0,end: 0.0,).animate(new CurvedAnimation(parent: _controller,curve: new Interval(0.0,0.5,curve: Curves.easeIn),));
    _backScale = new CurvedAnimation(
      parent: _controller,curve: new Interval(0.5,1.0,curve: Curves.eaSEOut),);
  }

  @override
  Widget build(BuildContext context) {
//    ThemeData theme = Theme.of(context);
    return new Scaffold(
      body: new Center(
        child: new Stack(
          children: [
            new AnimatedBuilder(
              child: widget.frontWidget,animation: _backScale,builder: (BuildContext context,Widget child) {
                final Matrix4 transform = new Matrix4.identity()
                  ..scale(_backScale.value,1.0);

                return new Transform(
                  transform: transform,alignment: FractionalOffset.center,child: child,);
              },new AnimatedBuilder(
                child: widget.backWidget,animation: _frontScale,Widget child) {
                  final Matrix4 transform = new Matrix4.identity()
                    ..scale(_frontScale.value,1.0);
                  return new Transform(
                    transform: transform,);
                }
            ),],);
  }

  doTheFlip() {
    setState(() {
      if (_controller.isCompleted || _controller.velocity > 0)
        _controller.reverse();
      else
        _controller.forward();
    });
  }
}

final Widget frontWidget = new Container(
  color: Colors.white,height: 180.0,child: new Column(
    children: [
      new Text("Front Side of the card")
    ],);