Multiple widgets use the same GlobalKey - flutter

Question

I'm' currently facing this issue. I am developing a quiz app and whenever an answer from a questions is pressed, the app should scroll down to the next question but I'm getting this error:
I am assigning 10 keys which are then thrown in a custom widget which takes them in a function and on a press of any of the buttons the app should scroll down to the next question: These is how a quiz question looks like:
Main Code where I call the custom widget:
Questions(
Keys.key1,
'assets/images/malware_quiz.jpeg',
'1. What is a malware?',
'Designed to damage computers, servers or any other devices',
"Used to get user's credentials",
"It's used to destroy networks",
true,
false,
false,
Color(0xFF383c40),
Color(0xff5e517d),
media.height),
Questions(
Keys.key2,
'assets/images/cyberattack.jpg',
'2. What is the most used cyber-attack?',
'DDoS',
'Ransomware',
'Phishing',
false,
false,
true,
Color(0xFF383c40),
Color(0xffe9755c),
media.height * 2),
SizedBox(
height: media.width > 600 ? heightQuestions : 250,
),
Questions(
Keys.key3,
'assets/images/ransomware_quiz.png',
'3. What type of attack is this?',
'Phishing',
'Ransomware',
'Zero-day exploit',
false,
true,
false,
Color(0xFF383c40),
Color(0xff061f3e),
media.height * 3),
Custom class for the keys:
class Keys {
static final key1 = GlobalKey();
static final key2 = GlobalKey();
static final key3 = GlobalKey();
static final key4 = GlobalKey();
static final key5 = GlobalKey();
static final key6 = GlobalKey();
static final key7 = GlobalKey();
static final key8 = GlobalKey();
static final key9 = GlobalKey();
static final key10 = GlobalKey();
static final key11 = GlobalKey();
}
The custom widget where I set the function to scroll:
class Questions extends StatefulWidget {
final String imagePath;
final String question;
final String answer1;
final String answer2;
final String answer3;
final bool iscorrectAnswer1;
final bool iscorrectAnswer2;
final bool iscorrectAnswer3;
final double offset;
final GlobalKey key;
final Color colorTop;
final Color colorBot;
int score = 0;
bool questionsAnswered = false;
Questions(
this.key,
this.imagePath,
this.question,
this.answer1,
this.answer2,
this.answer3,
this.iscorrectAnswer1,
this.iscorrectAnswer2,
this.iscorrectAnswer3,
this.colorBot,
this.colorTop,
this.offset,
);
#override
_QuestionsState createState() => _QuestionsState();
}
class _QuestionsState extends State<Questions> {
disableButton() {
setState(() {
widget.questionsAnswered = true;
});
}
#override
Widget build(BuildContext context) {
var media = MediaQuery.of(context).size;
void scrollPage() {
Scrollable.ensureVisible(widget.key.currentContext!,
alignment: 1, duration: Duration(seconds: 2), curve: Curves.ease);
print(widget.offset);
}
void createSnackBar(String text, Color c) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Container(
alignment: Alignment.center,
height: media.width > 600 ? 100 : 50,
child: Text(
text,
style: TextStyle(fontSize: 30, color: Colors.white),
)),
duration: const Duration(milliseconds: 4000),
width: 500.0,
backgroundColor: c,
padding: EdgeInsets.symmetric(horizontal: 8.0),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
));
}
return Align(
alignment: Alignment.topCenter,
child: Container(
key: widget.key,
width: 500,
height: media.width < 600 ? 600 : 900,
decoration: BoxDecoration(
border: Border.all(width: 1, color: Color(0xFFdbe1e4)),
borderRadius: BorderRadius.all(Radius.circular(15)),
color: widget.colorBot,
),
child: Column(
children: [
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.only(
top: 0,
),
child: Container(
width: 700,
height: media.width >= 600 ? 500 : 350,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.4),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(0, 4)),
],
border: Border.all(
width: 1, color: Color(0xFFdbe1e4)),
borderRadius:
BorderRadius.all(Radius.circular(15)),
color: widget.colorTop,
),
child: Column(children: [
Text(
widget.question,
style: TextStyle(
color: Colors.white,
fontSize: media.width > 600 ? 30 : 25,
),
),
Padding(
padding: EdgeInsets.only(top: 15),
child: Image.asset(
widget.imagePath,
height: media.width > 600 ? 300 : 250,
width: media.width > 600 ? 400 : 300,
),
)
])))),
Padding(
padding: EdgeInsets.only(
top: 40,
),
child: SizedBox(
width: 300,
height: 60,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(15)),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Color(0xFF304e60),
),
),
child: Text(
widget.answer1,
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
onPressed: widget.questionsAnswered == false
? () {
setState(() {
if (widget.iscorrectAnswer1 == true) {
scrollPage(); //THIS IS WHERE I USE THE FUNCTION TO SCROLL ON ALL BUTTONS
createSnackBar(
'Correct!', Color(0xFFa4d2ac));
disableButton();
Score.score++;
} else {
scrollPage();
disableButton();
createSnackBar(
'Wrong Answer!', Color(0xFFEA4C46));
}
});
}
: null),
P.S. Removed some of the unnecessary code

Answer 1

you have to create and Initialize the global key dynamically Please look at the code snippet
``
`1.Map<int, GlobalKey> globalKeyMap = {}; 2.void initializeKeyMap() { for (int index = 0; index < yourListname.length; index++) { globalKeyMap[index] = GlobalKey(); }} 3.#override void initState() { super.initState(); initializeKeyMap(); } 4.Container( key: globalKeyMap[index],child:.......<your Code>)`

Answer 2

I solved this issue by creating another parameter in the Questions() widget and set up a key for each widget. Then I would scroll to the next Question() widget using the moveToWidget key
Code:
class Questions extends StatefulWidget {
final String imagePath;
final String question;
final String answer1;
final String answer2;
final String answer3;
final bool iscorrectAnswer1;
final bool iscorrectAnswer2;
final bool iscorrectAnswer3;
final GlobalKey moveToWidgetKey;
final Color colorTop;
final Color colorBot;
int score = 0;
bool questionsAnswered = false;
Questions({
Key? key, //Set a unique key for each Question Widget
required this.moveToWidgetKey, // Set the key of the next Question widget to scroll at
required this.imagePath,
required this.question,
required this.answer1,
required this.answer2,
required this.answer3,
required this.iscorrectAnswer1,
required this.iscorrectAnswer2,
required this.iscorrectAnswer3,
required this.colorBot,
required this.colorTop,
}) : super(key: key);
scroll() {
Scrollable.ensureVisible(widget.moveToWidgetKey.currentContext! //NEW CODE,
duration: Duration(seconds: 2));
//Instantiate a Question
Questions(
key: Keys.key2,
moveToWidgetKey: Keys.key3,
imagePath: 'assets/images/cyberattack.jpg',
question: '2. What is the most used cyber-attack?',
answer1: 'DDoS',
answer2: 'Ransomware',
answer3: 'Phishing',
iscorrectAnswer1: false,
iscorrectAnswer2: false,
iscorrectAnswer3: true,
colorBot: Color(0xFF383c40),
colorTop: Color(0xffe9755c),
),