flutter - 如何从另一个类调用 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();
  }
}

任何帮助将不胜感激。

标签： flutterdart

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();
  }
}