Question 78524 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Navigation using a switchcase

I am building a listview of 20 list in them and once this list view is build i want to have different pages for each of the list tile and i also want a way to navigate to each of these page seperately.

i am thinking of using the switch case and use the index oof the list for the condition which will decide based on the clicked index to navigate.

final List<Map<String, dynamic>> _av_all_listtiles = [
    {
     
      "id": 1,
      "name": "label 1",
    },
    {
      
      "id": 2,
      "name": "label 2",
    },
    {
    
      "id": 3,
      "name": "label 3",
    },

ListView.builder(
                            
                            
                              itemCount: _av_searched_listiles.length,
                              itemBuilder: (context, index) => 
                                child: Card(
                                  borderOnForeground: true,
                                  elevation: 8,
       
                                  child: Container(
                                    height: 44.h,
                                    child: ListTile(
                                      
                                       onTap: () {
                                           Navigator.push(
                                           context,
                                           MaterialPageRoute(
                                           builder: (context) =>
                                           // here i want some kind of function or conditioon based on which it will navigate

                                           deposit_screen()),
                                         );
                                       },
                                    ),
                                  ),
                                ),
                              ),
                            ),

I tried to make function but it didnt work

Tags:

2

Answers


  1. 0

    You can use switch case for navigation like this :

    ListView.builder(
      itemCount: _av_all_listtiles.length,
      itemBuilder: (context, index) => Card(
        borderOnForeground: true,
        elevation: 8,
        child: Container(
          height: 44.h,
          child: ListTile(
            onTap: () {
              var screen = deposit_screen();
              switch (index) {
                case 0:
                  screen= deposit_screen();
                  break;
                case 1:
                  screen= deposit_screen1();
                  break;
                case 2:
                  screen= deposit_screen2();
                  break;
              }
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => screen
                ),
              );
            },
          ),
        ),
      ),
    )
    Login or Signup to reply.
  2. 0

    This is not too difficult to implement. There are few things to consider to fix your code.

    1. Usage of arrow function

      When you use arrow function it means you are calling and returning the value in a single line of code. If you need to write some logic inside function first change arrow function to normal function body.

    You need to change this

        Navigator.push(
       context,
       MaterialPageRoute(
       builder: (context) =>
       deposit_screen()),
    );

    to

        Navigator.push(
       context,
       MaterialPageRoute(
       builder: (context) {
       })
    );
    1. Now you can put your code inside this function. But for this builder to execute and navigate to a specific page, you need to return the page from here.
      For example, using the default counter code, I am trying to move to Page1 if value is even & Page2 if value is odd.
      You need to put your code like this.
        Navigator.push(
        context,
        MaterialPageRoute(builder: (context) {
          return (_counter %2==0 ? Page1() : Page2());
        }),
      );

    Now the router will get the page name correctly as you are returning it from builder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search