onPresssed() to navigate to next page not working flutter - flutter

Question

I use onPresssed() to navigate to next page (details_screen.dart) by clicking card 1. but its throws errors. i think I placed the code in the wrong place. can anyone help to place the code correctly? IN THE CODE I HAVE COMMENTED ON THE CODE BEACUSE ITS NOT WORKING. can anyone please help me on this
home_page.dart
import 'package:flutter/material.dart';
import 'package:fashion_app/color_filters.dart';
import 'package:fashion_app/details_screen.dart';
class HomePage extends StatefulWidget{
#override
_HomePageState createState ()=> _HomePageState();
}
class _HomePageState extends State <HomePage> {
final double _borderRadious = 24;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fashion store'),
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
buildSearchInput(),
buildColoredCard1(),
buildColoredCard2(),
buildColoredCard3(),
],
),
);
}
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.grey[200], borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
Widget buildColoredCard1() =>
Card(
shadowColor: Colors.red,
elevation: 8,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Summer Collection',
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 50),
Text(
'This card is rounded and has a gradient',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
// itemBuilder: (context, index)=>
// ItemCard(product:products[index]),
),
],
),
),
// onPressed:(){
// Navigator.push(
// context,
// MaterialPageRoute(builder: context)=> const DetailsScreen ());
);
}
Widget buildColoredCard2() =>
Card(
shadowColor: Colors.red,
elevation: 8,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Winter Collecton',
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 50),
Text(
'This card is rounded and has a gradient',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
],
),
),
);
Widget buildColoredCard3() =>
Card(
shadowColor: Colors.red,
elevation: 8,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Offer',
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 50),
Text(
'This card is rounded and has a gradient',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
],
),
),
);
// class ItemCard extends StatelessWidget{
//
// final
// }
details_screen.dart
import 'package:flutter/material.dart';
class DetailsScreen extends StatelessWidget {
const DetailsScreen({required Key key,}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70,
);
}
}

Answer 1

You can use GestureDetector widget for navigation, just wrap your card widget with GestureDetector widget.
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context)=> const DetailsScreen ());
);
},
child : Card(...)
)

Answer 2

you are putting semicolon, please compare code, it should be coma not a semicolon
onPressed:(){
Navigator.push(
context,
MaterialPageRoute(builder: context)=> const DetailsScreen
());
}
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailsScreen ()),
);
}

Answer 3

//I check the complete code you are putting two widgets outside the HomPage class and if you want to add on click property you have to wrap your card on any gesture recogniser like GestureDetector, InkWell Please check my code its help you, Thanks
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
#override
_HomePageState createState ()=> _HomePageState();
}
class _HomePageState extends State <HomePage> {
final double _borderRadious = 24;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fashion store'),
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
buildSearchInput(),
buildColoredCard1(),
buildColoredCard2(),
buildColoredCard3(),
],
),
);
}
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.grey[200], borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
Widget buildColoredCard1() =>
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=> DetailScreen()));
},
child: Card(
shadowColor: Colors.red,
elevation: 8,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Summer Collection',
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 50),
Text(
'This card is rounded and has a gradient',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
// itemBuilder: (context, index)=>
// ItemCard(product:products[index]),
),
],
),
),
// onPressed:(){
// Navigator.push(
// context,
// MaterialPageRoute(builder: context)=> const DetailsScreen ());
),
);
Widget buildColoredCard2() =>
Card(
shadowColor: Colors.red,
elevation: 8,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Winter Collecton',
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 50),
Text(
'This card is rounded and has a gradient',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
],
),
),
);
Widget buildColoredCard3() =>
Card(
shadowColor: Colors.red,
elevation: 8,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Offer',
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 50),
Text(
'This card is rounded and has a gradient',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
],
),
),
);
}
class DetailScreen extends StatefulWidget {
const DetailScreen({Key? key}) : super(key: key);
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70,
);
}
}
// class ItemCard extends StatelessWidget{
//
// final
// }

Answer 4

You were missing a bracket
onPressed:(){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailsScreen ());
}

Answer 5

You should use this to navigate. Do not forget the spaces, brackets and semicolons. They are so important!
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => Design1()));
},

Answer 6

there is ( missed
Navigator.push(context, MaterialPageRoute(builder: (context) =>
const DetailsScreen()),