How to call ConfettiController from another class - flutter

Question

Inside MyAppState I have created a ConfettiController called controllerTopCenter that I got from this package - https://pub.dev/packages/confetti
I also added a key to MyApp in the hopes of triggering the confetti animation from another class.
In the other class I added GlobalKey<MyAppState> key = GlobalKey<MyAppState>(); and then added key.currentState.controllerTopCenter.play(); which will trigger every time a certain thing is achieved within the app. However when it is triggered I get the error message "NoSuchMethodError: invalid member on null: 'controllerTopCenter'".
I'm wondering what is causing this error.
Here is my code:
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();
}
}
Any help would be greatly appreciated.

Answer 1

You can copy paste run full code below
You can move Tap tap outside from build and pass to MyApp
code snippet
Tap tap = new Tap();
void main() => runApp(MyApp(key: tap.key));
working demo
full code
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();
}
}