Keep getting error Cannot install a MaterialPageRoute<dynamic> after disposing it - flutter

Question

After I click on the button once and go back and try clicking it again, I get his error. Please let me know what I'm doing wrong. Thanks!
import "package:flutter/material.dart";
import "historicalfigureinfo.dart";
void main() {
runApp(const MaterialApp(home: Hwk3()));
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return const MaterialApp();
}
}
class Hwk3 extends StatefulWidget {
const Hwk3({Key? key}) : super(key: key);
#override
_Hwk3State createState() => _Hwk3State();
}
class _Hwk3State extends State<Hwk3> {
var nameArray = [
'Abraham Lincoln',
'Benito Juarez',
'Claude Monet',
'Charles Darwin',
'Deng Xiaoping',
'Frederick Chopin',
'George Washington Carver',
'Georgia O\'Keeffe',
'Mahatma Gandhi',
'Mark Twain',
'Muhammad Jinnah',
'Pablo Picasso',
'Santos Dumont'
];
List<Route> historicalfigures= [
MaterialPageRoute(builder: (_) => AbrahamLincoln()),
MaterialPageRoute(builder: (_) => BenitoJuarez()),
MaterialPageRoute(builder: (_) => ClaudeMonet()),
MaterialPageRoute(builder: (_) => CharlesDarwin()),
MaterialPageRoute(builder: (_) => DengXiaoping()),
MaterialPageRoute(builder: (_) => FredericChopin()),
MaterialPageRoute(builder: (_) => GeorgeWashingtonCarver()),
MaterialPageRoute(builder: (_) => GeorgiaOkeeffe()),
MaterialPageRoute(builder: (_) => MahatmaGandhi()),
MaterialPageRoute(builder: (_) => MarkTwain()),
MaterialPageRoute(builder: (_) => MuhammadJinnah()),
MaterialPageRoute(builder: (_) => PabloPicasso()),
MaterialPageRoute(builder: (_) => SantosDumont()),
];
#override
Widget build(BuildContext context) {
List<Route> myRoute = [];
return Scaffold(
appBar: AppBar(
title: const Text('Historical Figures'),
),
body: ListView.builder(
itemCount: nameArray.length,
itemBuilder: (BuildContext context, index) {
return ListTile(
title: Text(nameArray[index]),
trailing: Icon(Icons.info_outlined),
onTap: () {
Navigator.of(context).push(historicalfigures[index]);
},
);
},
),
);
}
}
This is the error I get. It seems like it disposes the button after I use it and doesn't reset it. The button is supposed to go to another page/different page depending on which button I press according to the historical name it's next to. Only works once though
Launching lib/main.dart on iPhone 13 in debug mode...
Running Xcode build...
Xcode build done. 6.6s
Debug service listening on ws://127.0.0.1:56466/gVaIxfjPH28=/ws
Syncing files to device iPhone 13...
======== Exception caught by gesture ===============================================================
The following assertion was thrown while handling a gesture:
Cannot install a MaterialPageRoute<dynamic> after disposing it.
'package:flutter/src/widgets/routes.dart':
Failed assertion: line 204 pos 12: '!_transitionCompleter.isCompleted'
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=2_bug.md
When the exception was thrown, this was the stack:
#2 TransitionRoute.install (package:flutter/src/widgets/routes.dart:204:12)
#3 ModalRoute.install (package:flutter/src/widgets/routes.dart:1125:11)
#4 _RouteEntry.handlePush (package:flutter/src/widgets/navigator.dart:3021:11)
#5 NavigatorState._flushHistoryUpdates (package:flutter/src/widgets/navigator.dart:3992:17)
#6 NavigatorState._pushEntry (package:flutter/src/widgets/navigator.dart:4604:5)
#7 NavigatorState.push (package:flutter/src/widgets/navigator.dart:4511:5)
#8 _Hwk3State.build.<anonymous closure>.<anonymous closure> (package:historical_figures/main.dart:66:37)
#9 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:989:21)
#10 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:193:24)
#11 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:608:11)
#12 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:296:5)
#13 BaseTapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:267:7)
#14 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:157:27)
#15 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:444:20)
#16 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:420:22)
#17 RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:278:11)
#18 GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:374:7)
#19 GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:338:5)
#20 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:296:7)
#21 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:279:7)
#25 _invoke1 (dart:ui/hooks.dart:185:10)
#26 PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:293:7)
#27 _dispatchPointerDataPacket (dart:ui/hooks.dart:98:31)
(elided 5 frames from class _AssertionError and dart:async)
Handler: "onTap"

Answer 1

First of all your MyApp class is useless, remove it! because you never use it
This class
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return const MaterialApp();
}
}
Secondly, remove the list of routes(historicalfigures). It is not the right way to write your routes on your home screen.
List<Route> historicalfigures= [
MaterialPageRoute(builder: (_) => AbrahamLincoln()),
MaterialPageRoute(builder: (_) => BenitoJuarez()),
MaterialPageRoute(builder: (_) => ClaudeMonet()),
MaterialPageRoute(builder: (_) => CharlesDarwin()),
MaterialPageRoute(builder: (_) => DengXiaoping()),
MaterialPageRoute(builder: (_) => FredericChopin()),
MaterialPageRoute(builder: (_) => GeorgeWashingtonCarver()),
MaterialPageRoute(builder: (_) => GeorgiaOkeeffe()),
MaterialPageRoute(builder: (_) => MahatmaGandhi()),
MaterialPageRoute(builder: (_) => MarkTwain()),
MaterialPageRoute(builder: (_) => MuhammadJinnah()),
MaterialPageRoute(builder: (_) => PabloPicasso()),
MaterialPageRoute(builder: (_) => SantosDumont()),
];
Navigation between screens will be organized from one place.
Navigator.push(
context,
MaterialPageRoute(
builder: (builder) =>
HistoricalFigure(name: nameArray[index])));
main.dart
import "package:flutter/material.dart";
import "historicalfigureinfo.dart";
//This your main function material app is run and Hwk3 is the home property.
void main() {
runApp(const MaterialApp(
home: Hwk3(),
));
}
class Hwk3 extends StatefulWidget {
const Hwk3({Key? key}) : super(key: key);
#override
_Hwk3State createState() => _Hwk3State();
}
class _Hwk3State extends State<Hwk3> {
var nameArray = [
'Abraham Lincoln',
'Benito Juarez',
'Claude Monet',
'Charles Darwin',
'Deng Xiaoping',
'Frederick Chopin',
'George Washington Carver',
'Georgia O\'Keeffe',
'Mahatma Gandhi',
'Mark Twain',
'Muhammad Jinnah',
'Pablo Picasso',
'Santos Dumont'
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Historical Figures'),
),
body: ListView.builder(
itemCount: nameArray.length,
itemBuilder: (BuildContext context, index) {
return ListTile(
title: Text(nameArray[index]),
trailing: const Icon(Icons.info_outlined),
onTap: () {
/*
You dont need to create a new page for each historical figure
that's the beauty of programming. Now we have only one screen
named as HistoricalFigure. We have a constructor that takes
the name of the figure as a parameter.
*/
Navigator.push(
context,
MaterialPageRoute(
builder: (builder) =>
HistoricalFigure(name: nameArray[index])));
},
);
},
),
);
}
}
Now we have only one screen named as HistoricalFigure. We will display all the information about them on this screen. You don't need to create a new page for each historical figure that's the beauty of programming. Assume we have thousands of artists, what should we do? Should we create a screen for each of them? Of course not. Now we have only one screen named as HistoricalFigure. We have a constructor that takes the name of the figure as a parameter. If you're not familiar with OOP design I highly suggest you study it.
historicalfigure.dart
import 'package:flutter/material.dart';
class HistoricalFigure extends StatelessWidget {
final String name;
//this is your constructor of the screen
const HistoricalFigure({Key? key, required this.name}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: SingleChildScrollView(
child: Column(
children: [
Text(name),
ElevatedButton(onPressed: (){
Navigator.pop(context);
}, child: const Text("Go to Home"))
],
),
),
),
),
);
}
}
If any question pops, feel free to ask.