Add materialRoute at the ontap function - flutter

Question

I try to open another page that I design on flutter but I get an error at the end of the code , at the brackets ( at the onTap(){}) what should I add in the brackets next to the ElementPageDetail? And also , why can't I add another container in the SingleChildScrollView that I created? It's because of the Stack? Expanded?
class _ElementMainPageState extends State<ElementMainPage> {
PageController _pageController = PageController(viewportFraction: 0.7);
double _indicatorHeight = 35.45;
int _pageIndex = 0;
List<String> _heroTag = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
List<String> _heroTextTag = List.generate(10, (index) => "t$index");
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
Expanded(
flex: 8,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
bottom: 160,
top: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (_) =>
ElementDetailPage()));
},
child: Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 24),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black
.withOpacity(0.2),
spreadRadius: -4,
blurRadius: 4,
offset: Offset(-4, 24))
],
color: Colors.indigoAccent[700],
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(24)),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Spacer(),
Container(
height: 48,
width: 48,
decoration: BoxDecoration(
color: Colors.white
.withOpacity(0.5),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Text(
"Unknown Stage",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
))
And the ElementDetailPage
import 'package:flutter/material.dart';
class ElementDetailPage extends StatefulWidget {
String imageTag;
String titleTag;
ElementDetailPage(this.imageTag, this.titleTag);
#override
_ElementDetailPageState createState() => _ElementDetailPageState();
}
class _ElementDetailPageState extends State<ElementDetailPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: Hero(
tag: widget.imageTag,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover)),
padding: EdgeInsets.only(left: 24),
child: ListView(
children: [
SizedBox(
height: 100,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 64,
width: 64,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5),
borderRadius: BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
],
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
Text(
"Unknown stage",
style: TextStyle(
fontSize: 64,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
""
"Unknown stage is the first fase to know somebody new."
" It is the easiest stage to see if you like the person in front of you "
"and if you want to continue forming a bound with them to become friends or"
"\n if there aren't your type of a person and let them go.This question will have some "
" basic questions and some intimate questions, if somebody wants to skip a question i propose a shot"
" \n WARNING : You may fall in love",
style: TextStyle(color: Colors.white),
),
],
),
),
)),
Positioned(
left: 16,
top: 32,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
onPressed: () {
Navigator.of(context).pop();
},
)),
Positioned(
top: 600,
left: 100,
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.white30],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(30.0)),
child: Container(
constraints:
BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Start playing",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 15),
),
),
),
)),
Positioned(
top: 700,
left: 100,
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.black87],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(30.0)),
child: Container(
constraints:
BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Spotify Playlist",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15),
),
),
),
))
],
),
);
}
}

Answer 1

In _ElementMainPageState() --> Wrap the Expanded widget inside the MaterialApp -> Scaffold Widget to resolve the navigating issue
And main thing is ElementDetailPage() too warp with Scaffold widget

Answer 2

For the error showed up in this error message:
In your ElementDetailPage, you are setting 2 positional arguments. By definition, these arguments need to be provided when you create a new ElementDetailPage.
To answer your question, you need to put the value of imageTag and titleTag, within the bracket. If you don't want to make these arguments compulsory, you can define them as optional parameters by putting them in the curly bracket:
class ElementDetailPage extends StatefulWidget {
String imageTag;
String titleTag;
ElementDetailPage({this.imageTag, this.titleTag});
#override
_ElementDetailPageState createState() => _ElementDetailPageState();
}