Going to a widget on tap Flutter

francisco cisera 0
Viewed 28

with this code I show a list of "Jobs" and when I tap one job I need to open that job and try to detail it more.. but I need to know how to go by index. Sorry my bad english hope u understand.. have a nice day

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:market_clean/screen/jobs/job_details.dart';
import 'package:market_clean/screen/welcomeScreen/welcome_screen.dart';
import 'package:market_clean/utills/color.dart';
import 'package:market_clean/utills/common_widget.dart';

class JobList extends StatelessWidget {
  final List<Map> searchList;

  const JobList({
    Key? key,
    required this.searchList,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Get.to(JobDetails(searchList: workList));
      },
      child: Container(
          decoration: BoxDecoration(
            color: white,
            border: Border(
              right: BorderSide(width: 3.0, color: Colors.grey.shade200),
              left: BorderSide(width: 3.0, color: Colors.grey.shade200),
            ),
          ),
          child: ScrollConfiguration(
            behavior: MyBehavior(),
            child: ListView.builder(
              padding: const EdgeInsets.only(top: 10),
              itemCount: searchList.length,
              shrinkWrap: true,
              itemBuilder: (context, index) => Padding(
                padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                child: Column(
                  children: [
                    ListTile(
                      contentPadding: EdgeInsets.zero,
                      leading: Container(
                        height: 40,
                        width: 40,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            image: DecorationImage(
                                image: AssetImage(searchList[index]["image"]),
                                fit: BoxFit.cover)),
                      ),
                      title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            searchList[index]["title"],
                            style: const TextStyle(
                                color: black,
                                fontSize: 15,
                                fontFamily: "RobotoRegular"),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                          Text(
                            searchList[index]["title"],
                            style: const TextStyle(
                                color: gray95,
                                fontSize: 12,
                                fontFamily: "RobotoRegular"),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                          RichText(
                            text: TextSpan(
                              text: searchList[index]["title"],
                              style: TextStyle(
                                  fontSize: 12,
                                  fontFamily: "RobotoRegular",
                                  color: green),
                              children: const <TextSpan>[
                                TextSpan(
                                  text: ' in last one month',
                                  style: TextStyle(
                                      fontSize: 12,
                                      fontFamily: "RobotoRegular",
                                      color: gray95),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                          Padding(
                            padding:
                                EdgeInsetsDirectional.fromSTEB(220, 0, 0, 0),
                            child: Text(
                              searchList[index]["price"],
                              style: const TextStyle(
                                  fontSize: 14,
                                  color: blue,
                                  fontFamily: "RobotoBold"),
                            ),
                          ),
                        ],
                      ),
                    ),
                    const Divider(
                      color: whiteF1,
                      thickness: 1,
                    )
                  ],
                ),
              ),
            ),
          )),
    );
  }
}

this is my code and i want to get to another screen but only see the information of the one i selected (tapped)

Please, i would need some help

widget indexing dart flutter
1 Answers

If you want to open any job detail when you tap that job, you should move Inkwell and onTap inside the ListView.builder and outside the ListTile.

And this way you can send index or anything of that item(job detail) to another screen.

Something like this :

class JobList extends StatelessWidget {
  final List<Map> searchList;

  const JobList({
    Key? key,
    required this.searchList,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          color: white,
          border: Border(
            right: BorderSide(width: 3.0, color: Colors.grey.shade200),
            left: BorderSide(width: 3.0, color: Colors.grey.shade200),
          ),
        ),
        child: ScrollConfiguration(
          behavior: MyBehavior(),
          child: ListView.builder(
            padding: const EdgeInsets.only(top: 10),
            itemCount: searchList.length,
            shrinkWrap: true,
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.only(left: 20.0, right: 20.0),
              child: Column(
                children: [
                  InkWell(
                    onTap: () {
                      Get.to(JobDetails(jobIndex: index));
                    },
                    child: ListTile(
                      contentPadding: EdgeInsets.zero,
                      leading: Container(
                        height: 40,
                        width: 40,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            image: DecorationImage(image: AssetImage(searchList[index]["image"]), fit: BoxFit.cover)),
                      ),
                      title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            searchList[index]["title"],
                            style: const TextStyle(color: black, fontSize: 15, fontFamily: "RobotoRegular"),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                          Text(
                            searchList[index]["title"],
                            style: const TextStyle(color: gray95, fontSize: 12, fontFamily: "RobotoRegular"),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                          RichText(
                            text: TextSpan(
                              text: searchList[index]["title"],
                              style: TextStyle(fontSize: 12, fontFamily: "RobotoRegular", color: green),
                              children: const <TextSpan>[
                                TextSpan(
                                  text: ' in last one month',
                                  style: TextStyle(fontSize: 12, fontFamily: "RobotoRegular", color: gray95),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                          Padding(
                            padding: EdgeInsetsDirectional.fromSTEB(220, 0, 0, 0),
                            child: Text(
                              searchList[index]["price"],
                              style: const TextStyle(fontSize: 14, color: blue, fontFamily: "RobotoBold"),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const Divider(
                    color: whiteF1,
                    thickness: 1,
                  )
                ],
              ),
            ),
          ),
        ));
  }
}
Hamed KookCheli0
Related