Is it possible using IconButton in a list to navigate to other screen-CodePudding

I want to add a clickable icon in the trailing in a ListTile which will navigate me to other screen but I keeps getting an error which undefined context. I am pretty sure that on my SettingsScreen() , I have included context to pass on. Here is my code for the reference. Hope someone can explained to me further.

class ProfileScreen extends StatelessWidget {
  List<dynamic> list = [
    {
      'id': 0,
      'title': 'Profile',
      'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {}),
    },
    {
      'id': 1,
      'title': 'Change PIN',
      'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {
        
      }),
    },
    {
      'id': 2,
      'title': 'Settings',
      'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {
        Navigator.push(context, MaterialPageRoute (builder: (context) => SettingsScreen()));
      }),
    },
    {
      'id': 3,
      'title': 'Contact Us',
      'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {}),
    },
    {
      'id': 4,
      'title': 'About NBS ',
      'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {}),
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( 
        backgroundColor: Colors.orange,
        leading: IconButton(onPressed: () { 
          Navigator.pop(context);
        }, icon: const Icon(Icons.arrow_back_ios_new_outlined),
      ), ), 
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            shadowColor: Colors.grey.shade300,
            child: ListTile(
              title: Text(
                list[index]['title'],
              ),
    

      trailing: list[index]['trailing'],
        ),
      );
    },
  ),
);
  }
}

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context, { String title = ''}) {  
    return MaterialApp(
      debugShowCheckedModeBanner: false, 
      title: 'Settings',
      home: Scaffold(  
        appBar: 
        AppBar( 
    backgroundColor: Colors.orange, 
    title: const Text('Settings',  
    style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold)), 
    centerTitle: true,
    leading: GestureDetector( 
      child: IconButton(
        icon: const Icon(Icons.arrow_back_ios_new_outlined,
        size: 20, 
        color: Colors.white,),
        onPressed: () { 
          Navigator.pop(context);
        },),
    )), 
        body: Column( 
          children: const [ 
           DetailsSettings(),
          ],
        ),
      ),
      
    );
  }
}

CodePudding user response：

Move your list inside build() function

Try this:

import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    List<dynamic> list = [
      {
        'id': 0,
        'title': 'Profile',
        'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {}),
      },
      {
        'id': 1,
        'title': 'Change PIN',
        'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {

        }),
      },
      {
        'id': 2,
        'title': 'Settings',
        'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {
          Navigator.push(context, MaterialPageRoute (builder: (context) => SettingsScreen()));
        }),
      },
      {
        'id': 3,
        'title': 'Contact Us',
        'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {}),
      },
      {
        'id': 4,
        'title': 'About NBS ',
        'trailing': IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {}),
      },
    ];
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        leading: IconButton(onPressed: () {
          Navigator.pop(context);
        }, icon: const Icon(Icons.arrow_back_ios_new_outlined),
        ), ),
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            shadowColor: Colors.grey.shade300,
            child: ListTile(
              title: Text(
                list[index]['title'],
              ),


              trailing: list[index]['trailing'],
            ),
          );
        },
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context, { String title = ''}) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Settings',
      home: Scaffold(
        appBar:
        AppBar(
            backgroundColor: Colors.orange,
            title: const Text('Settings',
                style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold)),
            centerTitle: true,
            leading: GestureDetector(
              child: IconButton(
                icon: const Icon(Icons.arrow_back_ios_new_outlined,
                  size: 20,
                  color: Colors.white,),
                onPressed: () {
                  Navigator.pop(context);
                },),
            )),
        body: Column(
          children: const [
            // DetailsSettings(),
          ],
        ),
      ),

    );
  }
}

It will work!

CodePudding user response：

Here List is not getting context thats why you are getting this issue. so you have to navigate without context.

You can set a global key for your navigation:

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

than Pass it to MaterialApp:

MaterialApp(
      title: 'MyApp',
     
      navigatorKey: navigatorKey,
    );

Use like this

navigatorKey.currentState.pushNamed('/setting_route');