CODEWITHSUNDEEP
flutter
aira claveria
aira claveria

Reputation: 1

i want to navigate my cards which are in grid view using flutter. my cards contain images not icons

import 'package:testapp/TryNavigate.dart';
import 'package:testapp/TryNavigate2.dart';

class CategoriesMain extends StatefulWidget {
@override
_CategoriesMainState createState() => _CategoriesMainState();
}

class _CategoriesMainState extends State<CategoriesMain> {
@override
Widget build(BuildContext context) {
 return new Scaffold(
   body: Products(),
 );
}
}

class Products extends StatefulWidget {
@override
_ProductsState createState() => _ProductsState();
}

class _ProductsState extends State<Products> {



final list_item = [
 {
   "name": "Baby Stuffs",
   "pic": "images/baby.png",
   "price": 70,
 },
 {
   "name": "Fruits",
   "pic": "images/fruits.png",
   "price": 70,
 },
 {
   "name": "Fruits",
   "pic": "images/start.jpg",
   "price": 70,
 },
 {
   "name": "Beverages",
   "pic": "images/beverages.png",
   "price": 70,
 },
 {
   "name": "Bread",
   "pic": "images/bread.jpg",
   "price": 70,
 },
 {
   "name": "Canneds Goods",
   "pic": "images/cannedgoods.png",
   "price": 70,
 },
 {
   "name": "Condiments",
   "pic": "images/condiments.png",
   "price": 70,
 },
 {
   "name": "Snacks",
   "pic": "images/snacks.png",
   "price": 70,
 },
 {
   "name": "Dairy, Eggs",
   "pic": "images/dairy2.jpg",
   "price": 70,
 },
 {
   "name": "Signature Cafes",
   "pic": "images/cafe.jpg",
   "price": 70,
 },
 {
   "name": "Frozen Foods",
   "pic": "images/frozenfoods.jpg",
   "price": 70,
 },
 {
   "name": "Grains, Pasta",
   "pic": "images/grains.jpg",
   "price": 70,
 },
 {
   "name": "Meat and Seafood",
   "pic": "images/meat.jpg",
   "price": 70,
 },
 {
   "name": "Miscellaneous",
   "pic": "images/misc.jpg",
   "price": 70,
 },
 {
   "name": "Paper Products",
   "pic": "images/paperproducts.jpg",
   "price": 70,
 },
 {
   "name": "Cleaning Supplies",
   "pic": "images/cleaning supplies.png",
   "price": 70,
 },
 {
   "name": "Personal Care",
   "pic": "images/personalcare.jpg",
   "price": 70,
 },
 {
   "name": "Pet Care",
   "pic": "images/petcare.jpg",
   "price": 70,
 },
];


@override
Widget build(BuildContext context) {
 return GridView.builder(
     itemCount: list_item.length,
     gridDelegate:
         SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     itemBuilder: (BuildContext context, int index) {
       return Product(
         product_name: list_item[index]['name'],
         product_pic: list_item[index]['pic'],
         product_price: list_item[index]['price'],
       );
     });
}
}


class Product extends StatelessWidget {

final product_name;
final product_pic;
final product_price;

Product({this.product_name, this.product_pic, this.product_price});

@override
Widget build(BuildContext context) {
 return Card(
     semanticContainer: true,
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(15.0),
     ),
     clipBehavior: Clip.antiAlias,
     child: Material(
         child: InkWell(
     splashColor: Colors.pink,
     child: Center(
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           Expanded(
               child: Container(
             decoration: BoxDecoration(
               image: DecorationImage(
                   image: AssetImage(product_pic), fit: BoxFit.fill),
             ),
           )),
           Padding(
               padding: EdgeInsets.all(10.0),
               child: Text(
                 product_name,
                 style: TextStyle(fontSize: 18.0),
               )),
         ],
       ),
     )
     )
     )
     );
}
}

I want each of the images to navigate to their own pages but i really dont know how to :(( I tried searching in some platforms but what ive read is that they used icons instead of images. I really dont know how to navigate these images to their own pages.

I want each of the images to navigate to their own pages but i really dont know how to :(( I tried searching in some platforms but what ive read is that they used icons instead of images. I really dont know how to navigate these images to their own pages.

I want each of the images to navigate to their own pages but i really dont know how to :(( I tried searching in some platforms but what ive read is that they used icons instead of images. I really dont know how to navigate these images to their own pages.

I want each of the images to navigate to their own pages but i really dont know how to :(( I tried searching in some platforms but what ive read is that they used icons instead of images. I really dont know how to navigate these images to their own pages.

Upvotes: 0

Views: 109

Answers (1)

ByteMe
ByteMe

Reputation: 1670

You could wrap each card with a GestureDetector widget and navigate it on tap

return GestureDetector(
        onTap: () => Navigator.of(context).push(), //your navigator code here
        child: Card(), //your card widget here
      )

Upvotes: 0

Related Questions