[TAVE/Study]Do it! Flutter 10장 데이터베이스에 데이터 저장하기③

211011 월

거의 다 했다!! 와우

 

📌 질의: 데이터베이스에서 데이터 조작을 요청하는 것

완료한 일만 모아서 보기 - 검색 질의

      appBar: AppBar(
        title: Text('Database Example'),
        actions: <Widget>[
          TextButton(
            onPressed: () {},
            child: Text(
              '완료한 일',
              style: TextStyle(color: Colors.white),
            ))
        ],
      ),

👉🏻 완료한 일을 보러가는 버튼을 만든다.

import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'todo.dart';

class ClearListApp extends StatefulWidget {
  Future<Database> database;
  ClearListApp(this.database);

  @override
  State<StatefulWidget> createState() => _ClearListApp();
}

class _ClearListApp extends State<ClearListApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('완료한 일'),
      ),
    );
  }
}

👉🏻 완료한 일만 보여주는 화면을 만든다.

✍🏻 StatefulWidget을 상속받는 ClearListApp 클래스를 만든다.

import 'clearList.dart';

(...생략...)

      routes: {
        '/': (context) => DatabaseApp(database),
        '/add': (context) => AddTodoApp(database),
        '/clear': (context) => ClearListApp(database),
      },

👉🏻 main에서 경로를 연결한다.

          TextButton(
            onPressed: () async {
              await Navigator.of(context).pushNamed('/clear');
              setState(() {
                todoList = getTodos();
              });
            },

👉🏻 플로팅 버튼을 누르면 ClearListApp으로 이동하게 한다.

  Future<List<Todo>> getClearList() async {
    final Database database = await widget.database;
    List<Map<String, dynamic>> maps = await database
      .rawQuery('select title, content, id from todos where active=1');
    
    return List.generate(maps.length, (i) {
      return Todo(
        title: maps[i]['title'].toString(),
        content: maps[i]['content'].toString(),
        id: maps[i]['id']);
    });
  }

👉🏻 완료한 일만 불러오는 함수를 만든다.

✍🏻 rewQuery: 직접 SQL 질의문을 전달해 데이터베이스에 질의한다. form절에 지정한 테이블에서 where절에 지정한 조건에 맞는 데이터를 검색해서 select 뒤에 나열한 칼럼을 가져온다.

👉🏻 이후 FutureBuilder를 이용해 화면에 보일 위젯을 만든다. 

 

완료한 일 모두 지우기 - 삭제 질의

      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final result = await showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('완료한 일 삭제'),
                content: Text('완료한 일을 모두 삭제할까요?'),
                actions: <Widget>[
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop(true);
                    },
                    child: Text('예')),
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop(false);
                    },
                    child: Text('아니요')),
                ],
              );
            });
          if (result == true ) {
            _removeAllTodos();
          }
        },
        child: Icon(Icons.remove)
      ),
    );
  }
  
  void _removeAllTodos() async {
    final Database database = await widget.database;
    database.rawDelete('delete from todos where active=1');
    setState(() {
      clearList = getClearList();
    });
  }

👉🏻 삭제하는 버튼과 기능을 만든다.

✍🏻 데이터를 삭제할 때는 delete문을 사용한다. 

 

모두 완료로 수정하기 - 수정 질의

  void _allUpdate() async {
    final Database database = await widget.db;
    await database.rawUpdate('update todos set active = 1 where active = 0');
    setState(() {
      todoList = getTodos();
    });
  }

👉🏻 수정 버튼과 기능을 만들어 준다.