如何从另一个类调用ConfettiController

Question

我在MyAppState内创建了一个从该程序包中获取的名为controllerTopCenter的ConfettiController-https://pub.dev/packages/confetti

我还为MyApp添加了一个键，希望从另一个类触发纸屑动画。

在另一个类中，我添加了GlobalKey<MyAppState> key = GlobalKey<MyAppState>();，然后添加了key.currentState.controllerTopCenter.play();，它将在应用程序中每次完成某件事时触发。但是，当它触发时，我收到错误消息“ NoSuchMethodError：null上的无效成员：'controllerTopCenter'”。

我想知道是什么导致了此错误。

这是我的代码：

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  ConfettiController controllerTopCenter;

  void initState() {
    controllerTopCenter =
        ConfettiController(duration: const Duration(seconds: 10))
          ..addListener(() => setState(() {}));
    super.initState();
  }

  void dispose() {
    controllerTopCenter.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Tap tap = new Tap();

    return MaterialApp(
        title: 'Sum Mini',
        home: Scaffold(
          body: Column(
            children: [
              Align(
                alignment: Alignment.center,
                child: ConfettiWidget(
                  confettiController: controllerTopCenter,
                  blastDirectionality: BlastDirectionality
                      .explosive, // don't specify a direction, blast randomly
                  shouldLoop:
                      true, // start again as soon as the animation is finished
                  colors: const [
                    Colors.green,
                    Colors.blue,
                    Colors.pink,
                    Colors.orange,
                    Colors.purple
                  ], // manually specify the colors to be used
                ),
              ),
              GestureDetector(
                onTap: () {
                  tap.onTap();
                },
                child: Container(
                  width: 100.0,
                  height: 100.0,
                  decoration: BoxDecoration(
                    color: Colors.greenAccent,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ],
          ),
        ));
  }
}

class Tap {
  GlobalKey<MyAppState> key = GlobalKey<MyAppState>();

  onTap() {
    key.currentState.controllerTopCenter.play();
  }
}

任何帮助将不胜感激。

Answer 1

您可以在下面复制粘贴运行完整代码
您可以将Tap tap从build移出并传递到MyApp
代码段

Tap tap = new Tap();

void main() => runApp(MyApp(key: tap.key));

工作演示

完整代码

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

Tap tap = new Tap();

void main() => runApp(MyApp(key: tap.key));

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  ConfettiController controllerTopCenter;

  void initState() {
    controllerTopCenter =
        ConfettiController(duration: const Duration(seconds: 10))
          ..addListener(() => setState(() {}));
    super.initState();
  }

  void dispose() {
    controllerTopCenter.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Sum Mini',
        home: Scaffold(
          body: Column(
            children: [
              Align(
                alignment: Alignment.center,
                child: ConfettiWidget(
                  confettiController: controllerTopCenter,
                  blastDirectionality: BlastDirectionality
                      .explosive, // don't specify a direction, blast randomly
                  shouldLoop:
                      true, // start again as soon as the animation is finished
                  colors: const [
                    Colors.green,
                    Colors.blue,
                    Colors.pink,
                    Colors.orange,
                    Colors.purple
                  ], // manually specify the colors to be used
                ),
              ),
              GestureDetector(
                onTap: () {
                  tap.onTap();
                },
                child: Container(
                  width: 100.0,
                  height: 100.0,
                  decoration: BoxDecoration(
                    color: Colors.greenAccent,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ],
          ),
        ));
  }
}

class Tap {
  GlobalKey<MyAppState> key = GlobalKey<MyAppState>();

  onTap() {
    key.currentState.controllerTopCenter.play();
  }
}