リストアイテムが変更されても、FlutterListViewが更新されない

ワイヤンハイン

Flutterを学び始めました。それを使って簡単なアプリケーションを開発しています。現在、アプリケーションがSQLiteデータベースのレコードを表示し、ユーザーが新しいレコードをSQLiteデータベースに追加する機能を開発しています。しかし、私のListViewは空白の画面を表示しています。

次のコードを持つDatabaseHelperというクラスがあります。

class DatabaseHelper {
  static DatabaseHelper _databaseHelper;
  Database _database;

  String noteTable = 'note_table';
  String colId = 'id';
  String colTitle = 'title';
  String colDescription = 'description';
  String colPriority = 'priority';
  String colDate = 'date';

  DatabaseHelper._createInstance();

  factory DatabaseHelper() {
    if (_databaseHelper == null) {
      _databaseHelper = DatabaseHelper._createInstance();
    }

    return _databaseHelper;
  }

  Future<Database> get database async {
    if (_database == null) {
      _database = await initializeDatabase();
    }

    return _database;
  }

  Future<Database> initializeDatabase() async {
    Directory directory = await getApplicationDocumentsDirectory();
    String path = directory.path + 'notes.db';
    var notesDatabase = await openDatabase(path, version: 1, onCreate: _createDB);

    return notesDatabase;
  }

  void _createDB(Database db, int newVersion) async {
    await db.execute('CREATE TABLE $noteTable($colId INTEGER PRIMARY KEY AUTOINCREMENT, $colTitle TEXT, $colDescription TEXT, $colPriority INTEGER, $colDate TEXT)');
  }

  Future<List<Map<String, dynamic>>> getNoteMapList() async {
    Database db = await this.database;

    return await db.query(noteTable, orderBy: '$colPriority ASC');
  }

  Future<int> insertNote(Note note) async {
    Database db = await this.database;

    return await db.insert(noteTable, note.toMap());
  }

  Future<int> updateNote(Note note) async {
    var db = await this.database;

    return await db.update(noteTable, note.toMap(), where: '$colId = ?', whereArgs: [note.id]);
  }

  Future<int> deleteNote(int id) async {
    var db = await this.database;

    return await db.rawDelete('DELETE FROM $noteTable WHERE $colId = $id');
  }

  Future<int> getCount() async {
    Database db = await this.database;
    List<Map<String, dynamic>> x = await db.rawQuery('SELECT COUNT(*) FROM $noteTable');

    return Sqflite.firstIntValue(x);
  }
}

次に、アイテムのリストが表示される次のコードを持つNoteListというウィジェットがあります。

    class NoteList extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _NoteListState();
      }
    }

    class _NoteListState extends State<NoteList> {
      List<Note> _notes = [];
      int _count = 0;
      DatabaseHelper _databaseHelper = DatabaseHelper();

      _NoteListState() {
        this._notes = getNotes();
        this._count = _notes.length;
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("Notes"),),
          body: Container(
            child: getListView(context),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              navigateToNoteForm("Add Note");
            },
          ),
        );
      }

      Widget getListView(BuildContext context) {
        return ListView.builder(
            itemCount: _count,
            itemBuilder: (context, index) {
              return ListTile(
                leading: CircleAvatar(
                  backgroundColor: _notes[index].priority == 1? Colors.yellow: Colors.red,
                  child: Icon(_notes[index].priority == 1 ? Icons.arrow_right : Icons.add),
                ),
                title: Text(_notes[index].title),
                subtitle: Text(_notes[index].date),
                trailing: Icon(Icons.delete),
                onTap: () {
                  navigateToNoteForm("Edit Note", _notes[index]);
                },
              );
            });
      }

      void navigateToNoteForm(String pageTitle, [Note note]) async {
        bool result = await Navigator.push(context, MaterialPageRoute(builder: (context) {
          return NoteForm(pageTitle, note);
        }));

        if (result) {
          setState(() {
            debugPrint("Updating list");
            _notes = getNotes();
            _count = _notes.length;
          });
        }
      }

      List<Note> getNotes() {
        List<Note> notes = List<Note>();
        Future<List<Map<String, dynamic>>> notesFuture = _databaseHelper.getNoteMapList();
        notesFuture.then((notesMap) {
          debugPrint("Total notes found in the database ${notesMap.length}");
          notesMap.forEach((map) {
            notes.add(Note.fromMapObject(map));
          });
        });

        return notes;
      }
    }


Then I also have another widget class called NoteForm with the following code.


class NoteForm extends StatefulWidget {
  String _title = "";
  Note _note = null;

  NoteForm(String title, [Note note]) {
    this._title = title;
    this._note = note;
  }

  @override
  State<StatefulWidget> createState() {
    return _NoteFormState();
  }
}

class _NoteFormState extends State<NoteForm> {

  double _minimumPadding = 15.0;
  var _priorities = [ 1, 2 ];
  var _titleController = TextEditingController();
  var _descriptionController = TextEditingController();
  var _dateController = TextEditingController();
  DatabaseHelper _databaseHelper = DatabaseHelper();
  var _selectedPriority = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget._title),),
      body: Builder(
        builder: (scaffoldContext) => Form(
          child: Column(
            children: <Widget>[
              Container(
                child: Padding(
                  padding: EdgeInsets.all(_minimumPadding),
                  child: TextFormField(
                    controller: _titleController,
                    decoration: InputDecoration(
                        labelText: "Title",
                        hintText: "Enter title"
                    ),
                  ),
                ),
              ),
              Container(
                  child: Padding(
                    padding: EdgeInsets.all(_minimumPadding),
                    child: TextFormField(
                      controller: _descriptionController,
                      decoration: InputDecoration(
                          labelText: "Description",
                          hintText: "Enter description"
                      ),
                    ),
                  )
              ),
              Container(
                child: Padding(
                  padding: EdgeInsets.all(_minimumPadding),
                  child: TextFormField(
                    controller: _dateController,
                    decoration: InputDecoration(
                        labelText: "Date",
                        hintText: "Enter date"
                    ),
                  ),
                ),
              ),
              Container(
                child: Padding(
                  padding: EdgeInsets.all(_minimumPadding),
                  child: DropdownButton<int>(
                    value: _selectedPriority,
                    items: _priorities.map((dropdownItem) {
                      return DropdownMenuItem<int>(
                        value: dropdownItem,
                        child: Text(dropdownItem == 1? "Low": "High"),
                      );
                    }).toList(),
                    onChanged: (int newSelectedValue) {
                      setState(() {
                        _selectedPriority = newSelectedValue;
                      });
                    },
                  ),
                ),
              ),
              Container(
                child: Padding(
                  padding: EdgeInsets.all(_minimumPadding),
                  child: RaisedButton(
                    child: Text(
                        "Save"
                    ),
                    onPressed: () {
                      _save(scaffoldContext);
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      )
    );
  }

  void _save(BuildContext context) async {
    Note note = Note();
    note.title = _titleController.text;
    note.description = _descriptionController.text;
    note.date = _dateController.text;
    note.priority = _selectedPriority;

    if (widget._note != null && widget._note.id!=null) {
      //update
      _databaseHelper.updateNote(note);
      this.showSnackBar(context, "Note has been updated.");
    } else {
      //create
      _databaseHelper.insertNote(note);
      this.showSnackBar(context, "Note has been added.");
    }

    closeForm(context);
  }

  void showSnackBar(BuildContext context, String message) {
    var snackBar = SnackBar(
      content: Text(message),
      action: SnackBarAction(
        label: "UNDO",
        onPressed: () {

        },
      ),
    );

    Scaffold.of(context).showSnackBar(snackBar);
  }

  void closeForm(BuildContext context) {
    Navigator.pop(context, true);
  }
}

アプリケーションを実行すると、次のように空白の画面が表示されます。

ここに画像の説明を入力してください

ご覧のとおり、debugPrintメソッドを使用してデータベースから返されたレコードの数をログアウトしています。データベース内に6つのレコードがあると言っています。レコードを表示していないだけです。コードの何が問題になっていますか?どうすれば修正できますか?

Viren V Varasadiya

コメントで述べたように、非同期タスクが原因で発生していたことは、実行に時間がかかります。非同期にしないと、実際のデータのロードまたは設定の前にsetState関数が実行されます。

したがって、次の変更で問題が解決します。

作るgetNotes async methodそして

getNotes().then((noteresponce){ setState((){ _notes=noteresponce; _count = _notes.length;} });

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

リストアイテムが変更されても、FlutterListViewが更新されない

分類Dev

FlutterListViewが更新されない

分類Dev

配列が変更されてもSwiftUIリストが更新されない

分類Dev

基になるリストが更新されても、FlutterListViewは更新されません

分類Dev

UILabelテキストを変更しても自動レイアウトがトリガーされない

分類Dev

リストアイテムが更新されているときにLivedataがトリガーされない

分類Dev

JavaFX TableView:アイテムリストの急速な変更が反映されていない

分類Dev

向きを変更してもレイアウトが更新されない

分類Dev

タイムアウトを変更してもリクエストのタイムアウトが変更されない(windows os)

分類Dev

(ReactJS)データベースが更新されても、アイテムのリストがページで更新されない

分類Dev

テキストが変更されてもjButtonのサイズが変更されないようにする

分類Dev

データが変更されてもVue.jsリストが更新されない

分類Dev

RecyclerViewリストアイテムが表示も再生もされない

分類Dev

ナビゲーションアイテムを変更してもリサイクラービューが更新されない

分類Dev

アイテムソースでListViewが更新されないObservableCollectionアイテムプロパティの変更

分類Dev

プロパティが変更されてもUIが更新されない

分類Dev

システム日付がPythonを変更しても日付が更新されない

分類Dev

プロパティが変更されても、アプリがビューをすぐに更新しない

分類Dev

サイズ変更時にアイテムが垂直リストに表示されない

分類Dev

XMLテキストを変更してもサイズが変更されないのはなぜですか?

分類Dev

FlutterListViewに間違ったアイテムが表示される

分類Dev

Vuexストアの状態が変化してもVueアプリの状態が更新されない

分類Dev

D3 + ReactNative-X位置が変更されてもデータポイント値が更新されない

分類Dev

スピナー アイテムを選択しても onItemSelected がトリガーされない - メソッド

分類Dev

リストアイテムがクリックされない

分類Dev

setState()を実行してもFlatListアイテムが更新されない

分類Dev

SwipeCellKit:リストからアイテムを削除しても、UITableviewが更新されないのはなぜですか?

分類Dev

リストの基になるアイテムのプロパティが変更されたときに計算された合計を更新する-wpf

分類Dev

D3:スライダーを変更してもサークルポイントが更新されない

Related 関連記事

  1. 1

    リストアイテムが変更されても、FlutterListViewが更新されない

  2. 2

    FlutterListViewが更新されない

  3. 3

    配列が変更されてもSwiftUIリストが更新されない

  4. 4

    基になるリストが更新されても、FlutterListViewは更新されません

  5. 5

    UILabelテキストを変更しても自動レイアウトがトリガーされない

  6. 6

    リストアイテムが更新されているときにLivedataがトリガーされない

  7. 7

    JavaFX TableView:アイテムリストの急速な変更が反映されていない

  8. 8

    向きを変更してもレイアウトが更新されない

  9. 9

    タイムアウトを変更してもリクエストのタイムアウトが変更されない(windows os)

  10. 10

    (ReactJS)データベースが更新されても、アイテムのリストがページで更新されない

  11. 11

    テキストが変更されてもjButtonのサイズが変更されないようにする

  12. 12

    データが変更されてもVue.jsリストが更新されない

  13. 13

    RecyclerViewリストアイテムが表示も再生もされない

  14. 14

    ナビゲーションアイテムを変更してもリサイクラービューが更新されない

  15. 15

    アイテムソースでListViewが更新されないObservableCollectionアイテムプロパティの変更

  16. 16

    プロパティが変更されてもUIが更新されない

  17. 17

    システム日付がPythonを変更しても日付が更新されない

  18. 18

    プロパティが変更されても、アプリがビューをすぐに更新しない

  19. 19

    サイズ変更時にアイテムが垂直リストに表示されない

  20. 20

    XMLテキストを変更してもサイズが変更されないのはなぜですか?

  21. 21

    FlutterListViewに間違ったアイテムが表示される

  22. 22

    Vuexストアの状態が変化してもVueアプリの状態が更新されない

  23. 23

    D3 + ReactNative-X位置が変更されてもデータポイント値が更新されない

  24. 24

    スピナー アイテムを選択しても onItemSelected がトリガーされない - メソッド

  25. 25

    リストアイテムがクリックされない

  26. 26

    setState()を実行してもFlatListアイテムが更新されない

  27. 27

    SwipeCellKit:リストからアイテムを削除しても、UITableviewが更新されないのはなぜですか?

  28. 28

    リストの基になるアイテムのプロパティが変更されたときに計算された合計を更新する-wpf

  29. 29

    D3:スライダーを変更してもサークルポイントが更新されない

ホットタグ

アーカイブ