본문 바로가기

그 땐 App했지/그 땐 Flutter했지

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

728x90

211011 월

 

SALite 사용하기

📌 모바일을 가볍고 빠른 SQLite를 주로 이용한다. 플러터는 sqflite라는 패키지를 제공한다.

class Todo {
  String? title;
  String? content;
  int? active;
  int? id;
  Todo({this.title, this.content, this.active, this.id});

  Map<String, dynamic> toMap(){
    return{
      'id': id,
      'title': title,
      'content': content,
      'active': active,
    };
  }
}

👉🏻 sqflite패키지는 데이터를 Map형태로 다룬다.

✍🏻 toMap함수는 데이터를 Map 형태로 반환한다.

✍🏻 sqlite는 bool값이 없어서 int를 이용해 true면 1, false면 0으로 처리한다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DatabaseApp(),
    );
  }
}

class DatabaseApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DatabaseApp();
}

class _DatabaseApp extends State<DatabaseApp> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Database Example'),),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final todo = await Navigator.of(context).pushNamed('/add');
        },
        child: Icon(Icons.add),),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

👉🏻 MyApp 클래스에 데이터베이스를 선언해 다른 클래스에서도 접근할 수 있게 한다. AddTodoApp클래스로 데이터를 추가한다.

✍🏻 DatabaseApp 클래스로 데이터 베이스의 데이터를 보여준다.

  Future<Database> initDatabase() async{
    return openDatabase(
      join(await getDatabasesPath(), 'todo_database.db'),
      onCreate: (db, version) {
        return db.execute(
          "CREATE TABLE todos(id INTEGER PRIMARY KEY AUTOINCREMENT, "
              "title TEXT, content TEXT, active INTEGER)",
        );
      },
      version: 1,
    );
  }

👉🏻 todo_database.db에서 데이터 테이블을 찾고 없으면 onCreate를 이용해 새로운 데이터베이스 테이블을 만든다.

✍🏻 initDatabase: 데이터베이스를 열어서 반환해준다.

✍🏻 getDatabasePath: 반환하는 경로에 todo_database.db라는 파일로 저장되어 있고 이 파일을 불러 반환한다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future<Database> database = initDatabase();
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => DatabaseApp(database),
        '/add': (context) => AddTodoApp(database)
      },
    );
  }

👉🏻 build에서 initDatabase함수를 호출한다. 라우트를 이용해 경로를 설정한다.

class DatabaseApp extends StatefulWidget {
  final Future<Database> db;
  DatabaseApp(this.db);
  
  @override
  State<StatefulWidget> createState() => _DatabaseApp();
}

👉🏻 DatabaseApp클래스를 수정한다.

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

class AddTodoApp extends StatefulWidget {
  final Future<Database> db;
  AddTodoApp(this.db);

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

class _AddTodoApp extends State<AddTodoApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo 추가'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[],
          ),
        ),
      ),
    );
  }
}

👉🏻 할 일 목록에 데이터를 입력하는 화면을 만든다.

728x90