How to transfer selected data from 1 page to another

Question

so, I have an app which has "search screen" file and "vehicle type" file, when I enter search_screen.dart file I have multiple containers and 1 of them is "vehicle type", when I click on that container it redirects me to vehicle_type.dart file/screen and there I get to choose from multiple vehicle types ,what I want is that whatever vehicle type I choose from that screen and click "set" it goes back and in that container which redirected me (where is says "Vehicle type") replaces right arrow icon all the way to the right with the names of the vehicle types that I have chosen(which have check icon in right part of container in vehicle_types.dart file)

this is my search_screen.dart file

class SearchScreen extends StatefulWidget {
  const SearchScreen({super.key});

  @override
  State<SearchScreen> createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 24),
            child: Row(
              children: [
                const Padding(
                  padding: EdgeInsets.only(left: 173),
                  child: Text(
                    'Home',
                    style: TextStyle(
                        color: Color(0xFF010D38),
                        fontSize: 20,
                        fontWeight: FontWeight.w500),
                  ),
                ),
                Gap(85),
                // ignore: deprecated_member_use
                IconButton(
                  onPressed: () {},
                  icon: const Icon(FontAwesomeIcons.trash),
                  iconSize: 20,
                  color: Color(0xFF010D38),
                )
              ],
            ),
          ),
          Gap(50),
          Column(
            children: [
              GestureDetector(
                onTap: () {
                    GoRouter.of(context).push('/search/vechicleType');
                },
                child: Container(
                  width: 316,
                  height: 50,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: Color(0xFF010D38),
                  ),
                  child: Row(
                    children: const [
                      Padding(
                        padding: EdgeInsets.only(left: 18),
                        child: Text(
                          'Vechicle Type',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.normal,
                            color: Color(0xFFA6A6A6),
                          ),
                        ),
                      ),
                      const Spacer(),
                      Padding(
                        padding: EdgeInsets.only(right: 24),
                        child: Icon(
                          Icons.keyboard_arrow_right_rounded,
                          color: Colors.white,
                          size: 30,
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Gap(20),
              Container(
                width: 316,
                height: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Color(0xFF010D38),
                ),
                child: Row(
                  children: const [
                    Padding(
                      padding: EdgeInsets.only(left: 18),
                      child: Text(
                        'Condition',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.normal,
                          color: Color(0xFFA6A6A6),
                        ),
                      ),
                    ),
                    const Spacer(),
                    Padding(
                      padding: EdgeInsets.only(right: 24),
                      child: Icon(
                        Icons.keyboard_arrow_right_rounded,
                        color: Colors.white,
                        size: 30,
                      ),
                    )
                  ],
                ),
              ),
              Gap(20),
              Container(
                width: 316,
                height: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Color(0xFF010D38),
                ),
                child: Row(
                  children: const [
                    Padding(
                      padding: EdgeInsets.only(left: 18),
                      child: Text(
                        'Make and Model',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.normal,
                          color: Color(0xFFA6A6A6),
                        ),
                      ),
                    ),
                    const Spacer(),
                    Padding(
                      padding: EdgeInsets.only(right: 24),
                      child: Icon(
                        Icons.keyboard_arrow_right_rounded,
                        color: Colors.white,
                        size: 30,
                      ),
                    )
                  ],
                ),
              ),
              Gap(20),
              Container(
                width: 316,
                height: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Color(0xFF010D38),
                ),
                child: Row(
                  children: const [
                    Padding(
                      padding: EdgeInsets.only(left: 18),
                      child: Text(
                        'Price',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.normal,
                          color: Color(0xFFA6A6A6),
                        ),
                      ),
                    ),
                    const Spacer(),
                    Padding(
                      padding: EdgeInsets.only(right: 24),
                      child: Icon(
                        Icons.keyboard_arrow_right_rounded,
                        color: Colors.white,
                        size: 30,
                      ),
                    )
                  ],
                ),
              ),
              Gap(20),
              Container(
                width: 316,
                height: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Color(0xFF010D38),
                ),
                child: Row(
                  children: const [
                    Padding(
                      padding: EdgeInsets.only(left: 18),
                      child: Text(
                        'Mileage',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.normal,
                          color: Color(0xFFA6A6A6),
                        ),
                      ),
                    ),
                    const Spacer(),
                    Padding(
                      padding: EdgeInsets.only(right: 24),
                      child: Icon(
                        Icons.keyboard_arrow_right_rounded,
                        color: Colors.white,
                        size: 30,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          Gap(15),
          const Padding(
            padding: EdgeInsets.only(right: 230),
            child: Text(
              'More criteria',
              style: TextStyle(
                  shadows: [
                    Shadow(
                      color: Colors.black,
                      offset: Offset(0, -1),
                    )
                  ],
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  color: Colors.transparent,
                  decoration: TextDecoration.underline,
                  decorationColor: Colors.black,
                  decorationThickness: 1),
            ),
          ),
          Gap(20),
          Container(
            width: 241,
            height: 45,
            decoration: BoxDecoration(
              color: Color(0xFF223167),
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Center(
              child: Text(
                'Search',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.normal,
                  letterSpacing: 2.2,
                  color: Colors.white,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

and this is my vehicle_type.dart file

class VehicleType extends StatefulWidget {
  const VehicleType({super.key});

  @override
  State<VehicleType> createState() => _VehicleTypeState();
}

class _VehicleTypeState extends State<VehicleType> {
  List<String> vehicleType = [
    'Saloon',
    'Coupe',
    'Cabriolet',
    'SUV',
    'Minibus',
  ];

  List<String> tempArray = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 6),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () => Navigator.pop(context),
                  icon: Icon(Icons.keyboard_arrow_left_outlined, size: 37),
                ),
                GestureDetector(
                  onTap: () => Navigator.pop(context),
                  child: const Text(
                    'Back',
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF010D38),
                    ),
                  ),
                ),
                const Spacer(),
                const Text(
                  'vehicle Type',
                  style: TextStyle(
                    fontSize: 23,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF010D38),
                  ),
                ),
                const Spacer(),
                const Padding(
                  padding: EdgeInsets.only(right: 25),
                  child: Text(
                    'Set',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF010D38),
                    ),
                  ),
                )
              ],
            ),
          ),
          Gap(48),
          Expanded(
            child: ListView.builder(
              itemCount: vehicleType.length,
              itemBuilder: (context, index) {
                return InkWell(
                  onTap: () {
                    setState(() {
                      if (tempArray.contains(
                        vehicleType[index].toString(),
                      )) {
                        tempArray.remove(vehicleType[index].toString());
                      } else {
                        tempArray.add(vehicleType[index].toString());
                      }
                    });
                  },
                  child: Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12)),
                    color: Color(0xFF010D38),
                    margin: EdgeInsets.symmetric(horizontal: 40, vertical: 5),
                    child: ListTile(
                      leading: const Padding(
                        padding: const EdgeInsets.only(left: 40),
                        child: Icon(Icons.car_rental, size: 35),
                      ),
                      iconColor: Colors.white,
                      title: Padding(
                        padding: const EdgeInsets.only(left: 70),
                        child: Text(
                          vehicleType[index].toString(),
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      ),
                      trailing: Icon(tempArray.contains(
                        vehicleType[index].toString(),
                      )
                          ? Icons.check
                          : null),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

I have been researching multiple and single selection for the past 2 days but couldn't find anything for this where data is passed like that in that exact container, it's mostly how to pass/transfer Data where it creates new screen and not the thing which I want and that is to go back and just replace arrow with names

Answer 1

You are using the go_router package as I can see. If you want to data pass to another screen you can use the extra param in this API. Then, you can get the value you sent from the 'state' variable inside the callback function of 'GoRouterWidgetBuilder

Answer 2

In the 'vehicle type' file you need to declare a Function parameter in order to be executed once the user clicks on the desire vehicle type. I am assuming this will be a String(you have an array of strings for types) but you can refactor this by your own class afterwards in case you need more data.

final Function action;
const VehicleType({super.key, required this.action,});

In the part of the code you select your vehicle execute this function like this(widget s used since its a stateful widget)

widget.action();

Then in your 'search screen' define selectedVehicleType as a local variable like this

String selectedVehicleType = 'Vehicle type';

Then create a function to be passed to the 'vehicle type' file like this

_executeAction(String value){
   setState(() {
     selectedVehicleType = value;
   });
}

And replace 'Vehicle type' in your code by the new created selectedVehicleType variable.

Once you press over the desire option and go back to the previous page you will see the changes reflected properly.