Flutter-从班级外部为班级制作动画

时间:2019-04-08 02:30:11

标签: animation flutter parent-child

我试图从类外部调用应用程序中类的animate()函数,但我无法使其正常运行。调用时,该类始终为null。

课程:

// ignore: camel_case_types
class styleMenu extends StatefulWidget {
  final Function() onPressed;
  final String tooltip;
  final IconData icon;
  final _callback;

  styleMenu({this.onPressed, this.tooltip, this.icon, @required void singlePlayerCallbacks(String callBackType) }  ):
        _callback = singlePlayerCallbacks;

  @override
  styleMenuState createState() => styleMenuState();

}

// ignore: camel_case_types
class styleMenuState extends State<styleMenu>
    with SingleTickerProviderStateMixin {
  bool isOpened = false;
  AnimationController _animationController;
  Animation<Color> _buttonColor;
  Animation<double> _animateIcon;
  Animation<double> _translateButton;
  Curve _curve = Curves.easeOut;
  double _fabHeight = 52.0;

  @override
  initState() {
    _animationController =
    AnimationController(vsync: this, duration: Duration(milliseconds: 600))
      ..addListener(() {
        setState(() {});
      });
    _animateIcon =
        Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
    _buttonColor = ColorTween(
      begin: Colors.blue,
      end: Colors.red,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.0,
        1.0,
        curve: Curves.linear,
      ),
    ));
    _translateButton = Tween<double>(
      begin: 0.0,
      end: _fabHeight + 3,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.0,
        1.0,
        curve: _curve,
      ),
    ));
    super.initState();
  }

  @override
  dispose() {
    _animationController.dispose();
    super.dispose();
  }

  animate() {
    if (!isOpened) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
    isOpened = !isOpened;
  }

  Widget blackTheme() {
    if (isOpened == true) {
      return Container(
        width: 50,
        height: 50,
        child: RawMaterialButton(
          shape: CircleBorder(),
          fillColor: Colors.black,
          elevation: 5.0,
          onPressed: animate,
          /*child: AnimatedIcon(
            icon: AnimatedIcons.menu_close,
            progress: _animateIcon,
          ),*/
        ),
      );
    } else {
      return blankTheme();
    }
  }

  Widget blueTheme() {
    if (isOpened == true) {
      return Container(
        width: 50,
        height: 50,
        child: RawMaterialButton(
          shape: CircleBorder(),
          fillColor: Colors.blue,
          elevation: 5.0,
          onPressed: (){},
          child: SizedBox(
            height: 36,
            width: 36,
            //child: Image.asset('lib/images/dice_button.png'),
          ),
        ),
      );
    } else {
      return blankTheme();
    }
  }

  Widget greenTheme() {
    if (isOpened == true) {
      return Container(
        width: 50,
        height: 50,
        child: RawMaterialButton(
          shape: CircleBorder(),
          fillColor: Colors.green,
          elevation: 5.0,
          onPressed: (){},
          child: SizedBox(
            height: 28,
            width: 28,
            //child: Image.asset('lib/images/coin_button.png'),
          ),
        ),
      );
    } else {
      return blankTheme();
    }
  }

  Widget redTheme() {
    if (isOpened == true) {
      return Container(
        width: 50,
        height: 50,
        child: RawMaterialButton(
          shape: CircleBorder(),
          fillColor: Colors.red,
          elevation: 5.0,
          onPressed: (){},
          child: SizedBox(
            height: 40,
            width: 40,
            //child: Image.asset('lib/images/background_colour.png'),
          ),
        ),
      );
    } else {
      return blankTheme();
    }
  }

  Widget whiteTheme() {
    if (isOpened == true) {
      return Container(
        width: 50,
        height: 50,
        child: RawMaterialButton(
          shape: CircleBorder(),
          fillColor: Colors.white,
          elevation: 5.0,
          onPressed: () {},
          child: SizedBox(
            height: 32,
            width: 32,
            //child: Image.asset('lib/images/home_button.png'),
          ),
        ),
      );
    } else {
      return blankTheme();
    }
  }

  Widget customTheme() {
    if (isOpened == true) {
      return Container(
        width: 50,
        height: 50,
        child: RawMaterialButton(
          shape: CircleBorder(),
          fillColor: Colors.white,
          elevation: 5.0,
          onPressed: () {},
          child: SizedBox(
            height: 32,
            width: 32,
            //child: Image.asset('lib/images/home_button.png'),
          ),
        ),
      );
    } else {
      return blankTheme();
    }
  }

  Widget blankTheme() {
    return Container(
      child: Opacity(
        opacity: 0.0,
        child: FloatingActionButton(
          heroTag: null,
          onPressed: () {},
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget> [
        Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Stack(
              children: <Widget>[
                Transform(
                  transform: Matrix4.translationValues(
                    0,
                    _translateButton.value,
                    0,
                  ),
                  child: blueTheme(),
                ),
                Transform(
                  transform: Matrix4.translationValues(
                    0,
                    _translateButton.value * 2,
                    0,
                  ),
                  child: greenTheme(),
                ),
                Transform(
                  transform: Matrix4.translationValues(
                    0,
                    _translateButton.value * 3,
                    0,
                  ),
                  child: redTheme(),
                ),
                Transform(
                  transform: Matrix4.translationValues(
                    0,
                    _translateButton.value * 4,
                    0,
                  ),
                  child: whiteTheme(),
                ),
                Transform(
                  transform: Matrix4.translationValues(
                    0,
                    _translateButton.value * 5,
                    0,
                  ),
                  child: customTheme(),
                ),
                blackTheme(),
              ],
            ),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              width: 50,
              height: 50,
              child: Opacity(
                opacity: 0.0,
                child: FloatingActionButton(
                  heroTag: null,
                  onPressed: animate,
                ),
              ),
            ),
            SizedBox(
              height: 5.0,
            ),
            Container(
              width: 50,
              height: 50,
              child: Opacity(
                opacity: 0.0,
                child: FloatingActionButton(
                  heroTag: null,
                  onPressed:  isOpened == true? (){
                    widget?._callback('blue');
                  } : () {},
                ),
              ),
            ),
            SizedBox(
              height: 5.0,
            ),
            Container(
              width: 50,
              height: 50,
              child: Opacity(
                opacity: 0.0,
                child: FloatingActionButton(
                  heroTag: null,
                  onPressed:  isOpened == true? (){
                    widget?._callback('green');
                  } : () {},
                ),
              ),
            ),
            SizedBox(
              height: 5.0,
            ),
            Container(
              width: 50,
              height: 50,
              child: Opacity(
                opacity: 0.0,
                child: FloatingActionButton(
                  heroTag: null,
                  onPressed:  isOpened == true? (){
                    widget?._callback('red');
                  } : () {},
                ),
              ),
            ),
            SizedBox(
              height: 5.0,
            ),
            Container(
              width: 50,
              height: 50,
              child: Opacity(
                opacity: 0.0,
                child: FloatingActionButton(
                  heroTag: null,
                  onPressed:  isOpened == true? (){
                    widget?._callback('white');
                  } : () {},
                ),
              ),
            ),
            SizedBox(
              height: 5.0,
            ),
            Container(
              width: 50,
              height: 50,
              child: Opacity(
                opacity: 0.0,
                child: FloatingActionButton(
                  heroTag: null,
                  onPressed:  isOpened == true? (){
                    widget?._callback('custom');
                  } : () {},
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

理想情况下,我希望能够从任何地方调用此类的animate()方法,因此我可以随意对菜单进行动画处理。但是,Flutter不会让我简单地调用此方法,就像我尝试简单的操作时一样:

styleMenuState().animate();

它告诉我该类为null,因此基本上没有动画。

我在这个问题上花了几个星期。有人在说Streambuilders和Listenable构建器,但是我找不到任何如何在线上实际使用它们的示例。

有人可以帮忙吗?我到处都在问,我根本找不到任何帮助。

0 个答案:

没有答案