Flutter 如何从另一个小部件访问 AnimationController 方法

Question

i am building a chess clock app in flutter. i have a homepage with two container widgets called blackBox and whiteBox they both display timers. i am using animation Controllers on both widgets to control the timers.

what i like to do is when i tap on white container i want to stop whiteController animation and start blackController animation, vice versa for black container. but i dont know how to access whiteController and its method inside blackBox widget. i am sharing a minimal version of my code below

HomePage

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        BlackBox(),
        WhiteBox(),
      ],
    );
  }
}

BlackBox widget

class BlackBox extends StatefulWidget {
  const BlackBox({
    Key key,
  }) : super(key: key);

  @override
  _BlackBoxState createState() => _BlackBoxState();
}

class _BlackBoxState extends State<BlackBox>
    with SingleTickerProviderStateMixin {
  AnimationController blackController;
  @override
  void initState() {
    blackController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          blackController.forward(from: blackController.value);
        },
        child: Container(
          color: Colors.amber,
        ),
      ),
    );
  }
}

WhiteBox Widget

class WhiteBox extends StatefulWidget {
  const WhiteBox({
    Key key,
  }) : super(key: key);

  @override
  _WhiteBoxState createState() => _WhiteBoxState();
}

class _WhiteBoxState extends State<WhiteBox> with TickerProviderStateMixin {
  AnimationController whiteController;
  @override
  void initState() {
    whiteController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          whiteController.forward(from: whiteController.value);
        },
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

Answer 1

I don't know this is the best solution. But you can achieve your case in this way.

Find the code snippets below:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController _blackController;
  AnimationController _whiteController;

  @override
  void initState() {
    _blackController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    _whiteController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 60),
    );
    _blackController.addListener(_rebuild);
    _whiteController.addListener(_rebuild);
    super.initState();
  }

  void _rebuild() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          BlackBox(
            whiteController: _whiteController,
            blackController: _blackController,
          ),
          WhiteBox(
            whiteController: _whiteController,
            blackController: _blackController,
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _blackController.removeListener(_rebuild);
    _whiteController.removeListener(_rebuild);
    super.dispose();
  }
}

Black Box:

class BlackBox extends StatefulWidget {
  const BlackBox({Key key, this.blackController, this.whiteController})
      : super(key: key);

  final AnimationController blackController;
  final AnimationController whiteController;

  @override
  _BlackBoxState createState() => _BlackBoxState();
}

class _BlackBoxState extends State<BlackBox> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          widget.whiteController.stop();
          widget.blackController.forward(from: widget.blackController.value);
        },
        child: Container(
          color: Colors.amber,
          alignment: Alignment.center,
          child:
              Text(widget.blackController.value.toStringAsFixed(2).toString()),
        ),
      ),
    );
  }
}

White Box:

class WhiteBox extends StatefulWidget {
  const WhiteBox({
    Key key,
    this.blackController,
    this.whiteController,
  }) : super(key: key);

  final AnimationController blackController;
  final AnimationController whiteController;

  @override
  _WhiteBoxState createState() => _WhiteBoxState();
}

class _WhiteBoxState extends State<WhiteBox> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          widget.blackController.stop();
          widget.whiteController.forward(from: widget.whiteController.value);
        },
        child: Container(
          color: Colors.red,
          alignment: Alignment.center,
          child:
              Text(widget.whiteController.value.toStringAsFixed(2).toString()),
        ),
      ),
    );
  }
}