我想用 flutter 创建一个可以排序的列表

Question

I'm working on a list in flutter that can be reordered. However, I am getting an error. I thought showDialog and builder were the cause of the error, so I turned off showDialog and tried again, but the error still occurred. How to solve this problem or How do I create a List using ReorderableListView.builder and showDialog? I do not understand English, so some words and sentences may be wrong.

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

void main() {
  // 最初に表示するWidget
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 右上に表示される"debug"ラベルを消す
      debugShowCheckedModeBanner: false,
      // アプリ名
      title: 'My Todo App',
      theme: ThemeData(
        // テーマカラー
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // リスト一覧画面を表示
      home: TodoListPage(),
    );
  }
}

// リスト一覧画面用Widget
class TodoListPage extends StatefulWidget {
  @override
  _TodoListPageState createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  // Todoリストのデータ
  List<String> todoList = [];

  void reorderData(int oldindex, int newindex) {
    setState(() {
      if (newindex > oldindex) {
        newindex -= 1;
      }
      final items = todoList.removeAt(oldindex);
      todoList.insert(newindex, items);
    });
  }

  void sorting() {
    setState(() {
      todoList.sort();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBarを表示し、タイトルも設定
      appBar: AppBar(
        title: Text('List list'),
      ),
      // データを元にListViewを作成
      body: ReorderableListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              for (final items in todoList)
                GestureDetector(
                  onTap: () async {
                    // ダイアログを表示------------------------------------
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return Column(
                          children: <Widget>[
                            AlertDialog(
                              content: SingleChildScrollView(
                                child: ListBody(
                                  children: <Widget>[
                                    Column(
                                      children: <Widget>[
                                        TextButton.icon(
                                          icon: const Icon(
                                            Icons.add,
                                            color: Colors.black,
                                          ),
                                          label: const Text('Edit'),
                                          onPressed: () {
                                            sorting();
                                          },
                                          onLongPress: () async {
                                            var morenewText =
                                                await Navigator.of(context)
                                                    .push(
                                              MaterialPageRoute(
                                                builder: (context) =>
                                                    TodoAddPage(
                                                        todoList[index]),
                                              ),
                                            );
                                            setState(() {
                                              todoList[index] = morenewText;
                                            });
                                          },
                                        ),
                                        ElevatedButton(
                                          child: const Text('Delete'),
                                          onPressed: () {
                                            setState(() {});
                                            todoList.removeAt(index);
                                            Navigator.pop(context);
                                          },
                                          style: ElevatedButton.styleFrom(
                                            primary: Colors.blue,
                                          ),
                                        ),
                                        ElevatedButton(
                                          child: const Text('Cancel'),
                                          onPressed: () {
                                            Navigator.of(context).pop();
                                          },
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        );
                      },
                    );
                  },
                  key: ValueKey(items),
                  child: ListTile(
                    title: Text(todoList[index]),
                  ),
                ),
            ],
          );
        },
        onReorder: reorderData,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // "push"で新規画面に遷移
          // リスト追加画面から渡される値を受け取る
          var newListText = await Navigator.of(context).push(
            MaterialPageRoute(builder: (context) {
              // 遷移先の画面としてリスト追加画面を指定
              return TodoAddPage(null);
            }),
          );
          if (newListText != null) {
            // キャンセルした場合は newListText が null となるので注意
            setState(() {
              // リスト追加
              todoList.add(newListText);
            });
          }
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class TodoAddPage extends StatefulWidget {
  final oldnama;
  TodoAddPage(this.oldnama);

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

class _TodoAddPageState extends State<TodoAddPage> {
  var newname = '';

  @override
  Widget build(BuildContext context) {
    if (widget.oldnama != null) {
      newname = widget.oldnama;
    }
    return Scaffold(
      appBar: AppBar(
        title: Text('Add list'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 入力されたテキストを表示
            const SizedBox(height: 8),
            // テキスト入力
            TextFormField(
              //テキスト入力の初期値を決める
              initialValue: newname,
              // 入力されたテキストの値を受け取る（valueが入力されたテキスト）
              onChanged: (String value) {
                // データが変更したことを知らせる（画面を更新する）
                // データを変更
                newname = value;
              },
            ),
            const SizedBox(height: 8),
            Container(
              // 横幅いっぱいに広げる
              width: double.infinity,
              // リスト追加ボタン
              child: ElevatedButton(
                onPressed: () {
                  // "pop"で前の画面に戻る
                  // "pop"の引数から前の画面にデータを渡す
                  Navigator.of(context).pop(newname);
                },
                child: Text('Add list', style: TextStyle(color: Colors.white)),
              ),
            ),
            const SizedBox(height: 8),
            Container(
              // 横幅いっぱいに広げる
              width: double.infinity,
              // キャンセルボタン
              child: TextButton(
                // ボタンをクリックした時の処理
                onPressed: () {
                  // "pop"で前の画面に戻る
                  Navigator.of(context).pop();
                },
                child: Text('Cancel'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

You're using itemBuilder: wrong. Update it using this...

itemBuilder: (context, index) {
  return ListTile(
    key: ValueKey(todoList[index]),
    onTap: () {
      // ダイアログを表示------------------------------------
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return Column(
            children: <Widget>[
              AlertDialog(
                content: SingleChildScrollView(
                  child: ListBody(
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          TextButton.icon(
                            icon: const Icon(
                              Icons.add,
                              color: Colors.black,
                            ),
                            label: const Text('Edit'),
                            onPressed: () {
                              sorting();
                            },
                            onLongPress: () async {
                              var morenewText =
                                  await Navigator.of(context).push(
                                MaterialPageRoute(
                                  builder: (context) =>
                                      TodoAddPage(todoList[index]),
                                ),
                              );
                              setState(() {
                                todoList[index] = morenewText;
                              });
                            },
                          ),
                          ElevatedButton(
                            child: const Text('Delete'),
                            onPressed: () {
                              setState(() {});
                              todoList.removeAt(index);
                              Navigator.pop(context);
                            },
                            style: ElevatedButton.styleFrom(
                              primary: Colors.blue,
                            ),
                          ),
                          ElevatedButton(
                            child: const Text('Cancel'),
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      );
    },
    title: Text(todoList[index]),
  );
},