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,
);
}
}
CodePudding user response：
You were missing a bracket
onPressed:(){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailsScreen ());
);
}
CodePudding user response：
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 ()),
);
}
CodePudding user response：
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(...)
)
CodePudding user response：
//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
// }
CodePudding user response：
there is ( missed
Navigator.push(context, MaterialPageRoute(builder: (context) =>
const DetailsScreen()),