Flutter List, detail page and todo

Question

I have a page with a list and a bar that reaches a detail page. I would like to add a pop on the detail page to retrieve an item and save it to a todo page but I have a problem with my detail page.

With a Stateless, I have no worries but, if I'm not mistaken, I need a Stateful to add a Future, showDialog.. but, I have problems with my indexes... and there, I'm lost...

Can someone give me a track or an explanation?

Thank you

home.dart

import 'dart:core';
import 'package:flutter/material.dart';
import 'package:test_todo_list/DataList.dart';
import 'package:test_todo_list/detail.dart';

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Liste Items'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search),
              onPressed: () {
                showSearch(context: context, delegate: DataSearch(listWords));
              })
        ],
      ),
      body: ListView.separated(
        itemCount: listWords.length,
        separatorBuilder: (BuildContext context, int i) =>
            Divider(color: Colors.grey),
        itemBuilder: (context, i) {
          return ListTile(
            onTap: () {
              Navigator.push(
                context,MaterialPageRoute(
                builder: (context) => Detail(listWordsDetail: listWords[i]),
              ),
              );
            },
            title: RichText(
                textAlign:TextAlign.left,
                text: TextSpan(
                    children:<TextSpan>[
                      TextSpan(
                        text:listWords[i].titlelist,
                        style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.blueGrey)),
                      ),

                    ]
                )
            ),
            subtitle: Text(listWords[i].definitionlist,
              style: Theme.of(context).textTheme.subtitle.merge(
                  TextStyle(fontStyle: FontStyle.italic, color: Colors.grey)),
            ),
            trailing: Icon(Icons.arrow_forward_ios, color: Colors.grey),
          );
        },
      ),
    );
  }
}
class DataSearch extends SearchDelegate<String> {

  final List<ListWords> listWords;

  DataSearch(this.listWords);

  @override
  List<Widget> buildActions(BuildContext context) {
    //Actions for app bar
    return [IconButton(icon: Icon(Icons.clear), onPressed: () {
      query = '';
    })];
  }

  @override
  Widget buildLeading(BuildContext context) {
    //leading icon on the left of the app bar
    return IconButton(
        icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: () {
          close(context, null);
        });
  }

  @override
  Widget buildResults(BuildContext context) {
    // show some result based on the selection
    final suggestionList = listWords;

    return ListView.builder(itemBuilder: (context, index) => ListTile(

      title: Text(listWords[index].titlelist),
      subtitle: Text(listWords[index].definitionlist),
    ),
      itemCount: suggestionList.length,
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // show when someone searches for something

    final suggestionList = query.isEmpty
        ? listWords
        : listWords.where((p) => p.titlelist.contains(RegExp(query, caseSensitive: false))).toList();


    return ListView.builder(itemBuilder: (context, index) => ListTile(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Detail(listWordsDetail: suggestionList[index]),
          ),
        );
      },
      trailing: Icon(Icons.remove_red_eye),
      title: RichText(
        text: TextSpan(
            text: suggestionList[index].titlelist.substring(0, query.length),
            style: TextStyle(
                color: Colors.red, fontWeight: FontWeight.bold),
            children: [
              TextSpan(
                  text: suggestionList[index].titlelist.substring(query.length),
                  style: TextStyle(color: Colors.grey)),
            ]),
      ),
    ),
      itemCount: suggestionList.length,
    );
  }
}

detail.dart

import 'package:flutter/material.dart';
import 'package:test_todo_list/DataList.dart';

class Detail extends StatefulWidget {

  Detail({Key key, @required this.listWordsDetail}) : super(key: key);
  final ListWords listWordsDetail;

  @override
  _DetailState createState() => _DetailState();
}

  class _DetailState extends State<Detail> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          brightness: Brightness.dark,
          title: const Text('Détails', style: TextStyle(color: Colors.white)),
          iconTheme: IconThemeData(color: Colors.white),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(listWordsDetail.titlelist +' (on detail page)',
                style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.blueGrey)),
              ),
              Text(listWordsDetail.definitionlist,
                style: Theme.of(context).textTheme.subtitle.merge(
                  TextStyle(fontStyle: FontStyle.italic, color: Colors.grey)),
        ),
              Container(
                padding: EdgeInsets.all(40.0),
                child: GestureDetector(
                  onTap: () {

                  },
                  child: Icon(Icons.add_shopping_cart),
                ),

              )
            ],
          ),
        )
    );
  } 
}

DataList.dart

List<ListWords>  listWords = [
  ListWords('oneWord', 'OneWord definition'),
  ListWords('twoWord', 'TwoWord definition.'),
  ListWords('TreeWord', 'TreeWord definition'),
];

class ListWords {
  String titlelist;
  String definitionlist;

  ListWords(String titlelist, String definitionlist) {
    this.titlelist = titlelist;
    this.definitionlist = definitionlist;
  }
}

Answer 1

After searching on the web, by chance, I found this solution that I can not explain but it's working...

import 'package:flutter/material.dart';
import 'package:test_todo_list/DataList.dart';
import 'package:test_todo_list/todo_list.dart';

class Detail extends StatefulWidget {

  const Detail({Key key, this.listWordsDetail}) : super (key: key);
  final ListWords listWordsDetail;

  @override
  _DetailState createState() => _DetailState();
}

class _DetailState extends State<Detail> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          brightness: Brightness.dark,
          title: const Text('Détails', style: TextStyle(color: Colors.white)),
          iconTheme: IconThemeData(color: Colors.white),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(widget.listWordsDetail.titlelist),
              Text(widget.listWordsDetail.definitionlist),
              Container(
                padding: EdgeInsets.all(40.0),
                child: GestureDetector(
                  onTap: () {
                    //open Dialog addTodoList()
                  },
                  child: Icon(Icons.add_shopping_cart),
                ),
              )
            ],
          ),
        )
    );
  }


  Future<Null> addTodoList() async {
    showDialog(context: context);
    //... à construire
  }
}