How to Navigate to a particular category index number in flutter

MahenderKumar
January 12, 2023
178 views
2 votes
3 Answers

I have a page/screen CountryNameScreen this screen has list of countries like this.

var countries = [
      'Australia',
      'NewZeland',
      'United State',
      'Russia',
      'United Kingdom',
      'India',
    ];

There is an onTap function for the above countries. When we click on the country the detailed information page displayed on screen.

The problem is this: i want to navigate from other page of this app
to navigate to "United State" which is on index 2

                onPressed: () {
                  Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: ((context) =>
                          const CountryNameScreen()),
                    ),
                  );
                },

What should i write while adding navigation code.

Answers

- xBullet
- January 12, 2023 at 11:41 am
- 0 votes
0
The problem is pretty poorly explained. Please try to add more details or explanation.

If you mean you want to dynamically go to a country page, try to add some constructor argument like this:
CountryNameScreen(countryName: indexNumber)

And with a variable (for ex: indexNumber) on top of the build method set the the indexNumber value to the value in the array.

Login or Signup to reply.

So, you need to send an index so the screen be able to show you a country name
EX: For new york the index 2

Inside the CountryNameScreen, you need to add a property for this index
And then to add the property into class’ constructor

const CountryNameScreen({Key? key, required this.index}) : super(key: key);

final int index;

Then, from the place you want to navigate to this screen, you can do it by passing the variable like this:

                  onTap: () => Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: ((context) {
                        return CountryNameScreen(
                            index: 2, //country's index
                          );
                      }),
                    ),
                  )

In case that you want to show the countries in a list and to get the country dynamically, you can use the following code and you can edit the inner widget as you like

ListView.separated(
            itemBuilder: (context, index) => InkWell(
                  onTap: () => Navigator.push(
                    context,
                    CupertinoPageRoute(
                      builder: ((context) {
                        return CountryNameScreen(
                            index: index,
                          );
                      }),
                    ),
                  ),
                  child: Center(
                    child: Text(
                      countries[index],
                    ),
                  ),
                ),
            separatorBuilder: (context, _) => const SizedBox(
                  height: 10,
                ),
            itemCount: countries.length)

Hope it helps

Try below code I have try your Expected Result, when you click country name it jumps to selected country name page.

Your country List:

 var countries = [
    'Australia',
    'NewZeland',
    'United State',
    'Russia',
    'United Kingdom',
    'India',
  ];

Your List Display Widget:

ListView.builder(
  itemCount: countries.length,
  itemBuilder: (context, index) {
    return ListTile(
      onTap: () {
        Navigator.push(
          context,
          CupertinoPageRoute(
            builder: (context) => CountryNameScreen(
              countryName: countries[index].toString(),
            ),
          ),
        );
      },
      title: Text(
        countries[index].toString(),
      ),
    );
  },
),

CountryNameScreen Widget:

class CountryNameScreen extends StatelessWidget {
  const CountryNameScreen({required this.countryName});
  final String countryName;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(countryName),
      ),
      body: Center(
        child: Text(
          'Selected Country - $countryName',
          style: const TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

Full Example

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  var countries = [
    'Australia',
    'NewZeland',
    'United State',
    'Russia',
    'United Kingdom',
    'India',
  ];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: countries.length,
      itemBuilder: (context, index) {
        return ListTile(
          onTap: () {
            Navigator.push(
              context,
              CupertinoPageRoute(
                builder: (context) => CountryNameScreen(
                  countryName: countries[index].toString(),
                ),
              ),
            );
          },
          title: Text(
            countries[index].toString(),
          ),
        );
      },
    );
  }
}

class CountryNameScreen extends StatelessWidget {
  const CountryNameScreen({required this.countryName});
  final String countryName;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(countryName),
      ),
      body: Center(
        child: Text(
          'Selected Country - $countryName',
          style: const TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}