How to use GetX Navigation from a Page to itself

Issue

I have a list like this:

  List<Country> countries = [
    Country(name: 'United States', border: ['Mexico', 'Canada']),
    Country(name: 'Mexico', border: ['United States']),
    Country(name: 'Canada'),
  ];

On the HomeView page will be a list of countries.name , when clicked => go to the DetailsView page that shows countries.border

In this DetailsView page, I want that when click on which countries.border, it will push to new Detailsview page that countries.name == countries.border.

enter image description here

I was able to do it with Navigator().push

 //Use Navigator().push
                          Navigator.of(context).push(MaterialPageRoute(
                            builder: (_) => DetailView(country: controller.countries[i]),

but can’t do it with Get.to:

//Use Get.to not succeed
                          Get.to(() => DetailView(country: controller.countries[i]));

so please help me, this is the full code:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() async {
  runApp(GetMaterialApp(
    debugShowCheckedModeBanner: false,
    home: HomeView(),
  ));
}

class Country {
  String name;
  List<String> border;

  Country({this.name, this.border});
}

class HomeController extends GetxController {
  List<Country> countries = [
    Country(name: 'United States', border: ['Mexico', 'Canada']),
    Country(name: 'Mexico', border: ['United States']),
    Country(name: 'Canada'),
  ];
}

class HomeView extends GetView<HomeController> {
  final controller = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('List Countries')),
      body: ListView.separated(
        separatorBuilder: (_, __) => Divider(),
        itemCount: controller.countries.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(controller.countries[index].name),
            onTap: () => Get.to(
              () => DetailView(
                country: controller.countries[index],
              ),
            ),
          );
        },
      ),
    );
  }
}

class DetailView extends GetView<HomeController> {
  final Country country;

  DetailView({this.country});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(country.name)),
      body: Column(
        children: [
          Text('Border'),
          if (country.border != null)
            Expanded(
              child: ListView.builder(
                itemCount: country.border.length,
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: [
                      GestureDetector(
                        onTap: () {
                          final currentCountry = controller.countries.firstWhere(
                              (e) => e.name == country.border[index],
                              orElse: () => null);
                          int i = controller.countries.indexOf(currentCountry);

                          //Use Get.to not succeed
                          // Get.to(() => DetailView(country: controller.countries[i]));

                          //Use Navigator().push
                          Navigator.of(context).push(MaterialPageRoute(
                            builder: (_) => DetailView(country: controller.countries[i]),
                          ));
                        },
                        child: Text(
                          country.border[index],
                          style:
                              TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
                        ),
                      )
                    ],
                  );
                },
              ),
            ),
        ],
      ),
    );
  }
}


Solution

You can add preventDuplicates flag:

 Get.to(() => DetailView(country: controller.countries[i]), preventDuplicates: false);

So then i think you will need to put the controller using Create on the main file, so every time you call the screen it will create another controller for that:

//main.dart
Get.create(() => Controller());

//so you call this way on the DetailView page
final controller = Get.find();

Answered By – Jorge Vieira

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.