Как сделать контейнер кликабельным и при нажатии приводит к другой странице во флаттере

Question

Как сделать этот раздел кликабельным, чтобы я мог переходить на другую страницу, иметь сетку изображений, по которой я хочу иметь возможность перемещаться и воспроизводить видео.

                  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'),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),

Answer 1

Оберните контейнер внутри InkWell и вызовите navigation.pu sh внутри функции обратного вызова onTap.

Пример кода

 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'),
                              ],
                            ),
                          ),
                         ),
                        ],
                      ),

)

Проверьте больше о https://api.flutter.dev/flutter/material/InkWell-class.html

Также отметьте GestureDetector, если не хотите прикасаться к обратной связи: https://api.flutter.dev/flutter/widgets/GestureDetector-class.html