flutterflutter-futurebuilder

Flutter FutureBuilder Tap List Item Extract Index Number


I need to extract FutureBuilder list item index to edit the list item on another screen MyForm.

In the code below where the snapshot has data, I create the list.

When I tap on a list item, I will go to MyForm screen to edit the list item.

Issue: I need to know the index number of the list item that I tapped on.

On MyForm screen, I want to update the list item using the same index number.

Could you please advise how to extract the list index number.

Widget jlist = SizedBox(width: 800, height: 500, child: FutureBuilder<List<Job>?>(future: readAllItems(),builder: (BuildContext context, AsyncSnapshot<List<Job>?> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return ListView.separated(shrinkWrap: true,itemCount: MyFormState.jobs.length,itemBuilder: (BuildContext context, int index) {
          return Container(height: 100, child: SingleChildScrollView(child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,mainAxisSize: MainAxisSize.min,children: <Widget>[Text('')],)));
    },separatorBuilder: (BuildContext context,int index) => const Divider());
      } else if (snapshot.hasData) {
          List<Job> items = snapshot.data!;
          return ListView.separated(shrinkWrap: true,itemCount: items.length,itemBuilder: (BuildContext context, int index) {
          return Container(height: 100, child: SingleChildScrollView(child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,mainAxisSize: MainAxisSize.min,children: <Widget>[
                ListTile(title: Text(items[index].Description,style: TextStyle(fontSize: 11)),style: TextStyle(fontSize: 11)),onTap:() {
        
          //How do I extract the list index number to use on MyForm screen?
                
         MyFormState.myNote.text = items[index].Description;
         Navigator.push(context, MaterialPageRoute(builder: (context) => MyForm()));
         })])));
        },separatorBuilder: (BuildContext context,int index) => const Divider());
        }
      else {
        return const Text('No data available');
      }
    }));

Thank you


Solution

  • You can pass the index value as parameters to your next view which is MyForm screen in your case like this :

    Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => MyForm(
                              index: index,
                            ),
                          ),
                        );
    

    And this is how you can retrieve it from your next view which is MyForm

    this is how your constructor should look like

    const MyForm({
    super.key,
    required this.index, });
    

    This is how you can call the index that you want to use in your code :

    widget.index,// call depends on what you're going to do with this passed value
    

    I hope this can solve your issue