How to make a container clickable and when clicked leads to another page in flutter

Question

How do I make this section clickable so that I can navigate to another page, have a grid of pictures that I want to be able to navigate to and play videos from.

                  SizedBox(height: 30,),
                    Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("Weight Loss Workouts", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.lime[700], fontSize: 25),),
                          SizedBox(height: 20,),
                          Container(
                            height: 200,
                            child: ListView(
                              scrollDirection: Axis.horizontal,
                              children: <Widget>[
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 1'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weigth Loss Workout 2'),
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 3'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weight Loss Workout 4'),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),

This might help you: [https://stackoverflow.com/a/49959634/9342208](https://stackoverflow.com/a/49959634/9342208) — Bagghi Daku, Apr 11 '20 at 15:09

Gaurav jain · Answer 1 · 2020-04-14T22:24:23.080

Wrap the Container inside InkWell and call navigation.push inside onTap callback function.

Sample code

 Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("Weight Loss Workouts", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.lime[700], fontSize: 25),),
                          SizedBox(height: 20,),
                       InkWell(
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => OrderDetailsPage(),
                              ),
                            );
                          },
                    child: Container(
                            height: 200,
                            child: ListView(
                              scrollDirection: Axis.horizontal,
                              children: <Widget>[
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 1'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weigth Loss Workout 2'),
                                makeItem(image: 'assets/images/dom4.jpg', title: 'Weight Loss Workout 3'),
                                makeItem(image: 'assets/images/weightloss.png', title: 'Weight Loss Workout 4'),
                              ],
                            ),
                          ),
                         ),
                        ],
                      ),

)

Check more about https://api.flutter.dev/flutter/material/InkWell-class.html

Also check GestureDetector if you don't want touch feedback: https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

This makes the whole container one clickable thing. When I click on one of the images it should navigate. With the code you added it makes the whole container clickable not just one part. How do I make each image have its own individual navigation link. — Benjamin Daniel Morgan, Apr 14 '20 at 15:21
That's a sample code. Just wrap the required container with inkwell. — Gaurav jain, Apr 14 '20 at 22:18

score 1 · Answer 2 · answered Nov 05 '22 at 06:37

1

GestureDetector( onTap: () => ......, child: Container(...), );

for Example

GestureDetector( onTap: () => print("container clicked"), child: Container(color:Colors.BLACK,width:100,height:100), );

answered Nov 05 '22 at 06:37

RIYAS PULLUR

13
1
4

How to make a container clickable and when clicked leads to another page in flutter

2 Answers2