スポンサーリンク

【Flutter】SQLiteの使い方。～ insert・select・update・delete ～

Flutter
スポンサーリンク

今回の記事はFlutterプロジェクトでのSQLiteの使い方をご紹介する記事です。create tableからデータベース操作のinsert・select・update・deleteまでデータベースの操作を網羅しております。FlutterでSQLiteを使ってみようと考えている方は是非参考にしてみてください。

スポンサーリンク

FlutterプロジェクトにSQLiteインストール

FlutterプロジェクトでSQLiteを使用する場合はpubgetでインストールできます。「pubget.yaml」に下記を記述し、「pub get」します。

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  sqflite: ^1.3.2+3
  flutter:
    sdk: flutter

【Flutter】SQLiteの使い方

SQLiteの使い方は簡単です。テーブル定義として、今回は「id」「text」がカラムとするテーブルを作成し、データ操作を行っていきます。

SQLiteのテーブル定義

こちらはテーブル定義用のクラスです。まずはこちらを準備します。

final int id;
final String text;

Memo({this.id, this.text});

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

@override
String toString() {
  return 'Memo{id: $id, text: $text}';
}

SQLiteでテーブル作成

次にデータベースにテーブルを作成するための「Create Table」を実行するための、メソッドです。

static Future<Database> get database async {
    final Future<Database> _database = openDatabase(
      join(await getDatabasesPath(), 'memo_database.db'),
      onCreate: (db, version) {
        return db.execute(
          "CREATE TABLE memo(id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT)",
        );
      },
      version: 1,
    );
    return _database;
  }

SQLiteでデータの追加（insert）

次にSQLiteでデータ追加（insert）を行うメソッドの使い方です。

static Future<void> insertMemo(Memo memo) async {
    final Database db = await database;
    await db.insert(
      'memo',
      memo.toMap(),
      conflictAlgorithm: ConflictAlgorithm.replace,
    );
  }

SQLiteでデータの照会（select）

次にSQLiteでデータ照会するためのselectと同義なメソッドの使い方です。

static Future<List<Memo>> getMemos() async {
    final Database db = await database;
    final List<Map<String, dynamic>> maps = await db.query('memo');
    return List.generate(maps.length, (i) {
      return Memo(
        id: maps[i]['id'],
        text: maps[i]['text'],
      );
    });
  }

SQLiteでデータ更新（update）

次にSQLiteでデータ更新（update）するメソッドの使い方です。

static Future<void> updateMemo(Memo memo) async {
    final db = await database;
    await db.update(
      'memo',
      memo.toMap(),
      where: "id = ?",
      whereArgs: [memo.id],
      conflictAlgorithm: ConflictAlgorithm.fail,
    );
  }

SQLiteでデータ削除（delete）

最後にSQLiteでデータ削除（delete）するメソッドの使い方です。

static Future<void> deleteMemo(int id) async {
    final db = await database;
    await db.delete(
      'memo',
      where: "id = ?",
      whereArgs: [id],
    );
  }

データ照会以外はどれもメソッドの名前がそのままの意味となっておりわかりやすいです。

では最後にFlutterプロジェクトでSQLiteを使ったサンプルアプリ例を紹介します。

FlutterでSQLiteを使用したTodoアプリ例

SQLiteをの使い方をより理解できるようなTODOアプリを作成してみます。下記をコピーすればとりあえず動かすことはできると思います。

import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'dart:async';
import 'package:path/path.dart';
class Memo {
final int id;
final String text;
Memo({this.id, this.text});
Map<String, dynamic> toMap() {
return {
'id': id,
'text': text,
};
}
@override
String toString() {
return 'Memo{id: $id, text: $text}';
}
static Future<Database> get database async {
final Future<Database> _database = openDatabase(
join(await getDatabasesPath(), 'memo_database.db'),
onCreate: (db, version) {
return db.execute(
"CREATE TABLE memo(id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT)",
);
},
version: 1,
);
return _database;
}
static Future<void> insertMemo(Memo memo) async {
final Database db = await database;
await db.insert(
'memo',
memo.toMap(),
conflictAlgorithm: ConflictAlgorithm.replace,
);
}
static Future<List<Memo>> getMemos() async {
final Database db = await database;
final List<Map<String, dynamic>> maps = await db.query('memo');
return List.generate(maps.length, (i) {
return Memo(
id: maps[i]['id'],
text: maps[i]['text'],
);
});
}
static Future<void> updateMemo(Memo memo) async {
final db = await database;
await db.update(
'memo',
memo.toMap(),
where: "id = ?",
whereArgs: [memo.id],
conflictAlgorithm: ConflictAlgorithm.fail,
);
}
static Future<void> deleteMemo(int id) async {
final db = await database;
await db.delete(
'memo',
where: "id = ?",
whereArgs: [id],
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo SQL',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MySqlPage(),
);
}
}
class MySqlPage extends StatefulWidget {
@override
_MySqlPageState createState() => _MySqlPageState();
}
class _MySqlPageState extends State<MySqlPage> {
List<Memo> _memoList = [];
final myController = TextEditingController();
final upDateController = TextEditingController();
var _selectedvalue;
Future<void> initializeDemo() async {
_memoList = await Memo.getMemos();
}
@override
void dispose() {
myController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('メモアプリ'),
),
body: Container(
padding: EdgeInsets.all(32),
child: FutureBuilder(
future: initializeDemo(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
// 非同期処理未完了 = 通信中
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
itemCount: _memoList.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: Text(
'ID ${_memoList[index].id}',
style: TextStyle(fontWeight: FontWeight.bold),
),
title: Text('${_memoList[index].text}'),
trailing: SizedBox(
width: 76,
height: 25,
child: RaisedButton.icon(
onPressed: () async {
await Memo.deleteMemo(_memoList[index].id);
final List<Memo> memos = await Memo.getMemos();
setState(() {
_memoList = memos;
});
},
icon: Icon(
Icons.delete_forever,
color: Colors.white,
size: 18,
),
label: Text(
'削除',
style: TextStyle(fontSize: 11),
),
color: Colors.red,
textColor: Colors.white,
),
),
),
);
},
);
},
),
),
floatingActionButton: Column(
verticalDirection: VerticalDirection.up,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text("新規メモ作成"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('なんでも入力してね'),
TextField(controller: myController),
RaisedButton(
child: Text('保存'),
onPressed: () async {
Memo _memo = Memo(text: myController.text);
await Memo.insertMemo(_memo);
final List<Memo> memos = await Memo.getMemos();
setState(() {
_memoList = memos;
_selectedvalue = null;
});
myController.clear();
Navigator.pop(context);
},
),
],
),
));
},
),
SizedBox(height: 20),
FloatingActionButton(
child: Icon(Icons.update),
backgroundColor: Colors.amberAccent,
onPressed: () async {
await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: StatefulBuilder(
builder:
(BuildContext context, StateSetter setState) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('IDを選択して更新してね'),
Row(
children: <Widget>[
Flexible(
flex: 1,
child: DropdownButton(
hint: Text("ID"),
value: _selectedvalue,
onChanged: (newValue) {
setState(() {
_selectedvalue = newValue;
print(newValue);
});
},
items: _memoList.map((entry) {
return DropdownMenuItem(
value: entry.id,
child: Text(entry.id.toString()));
}).toList(),
),
),
Flexible(
flex: 3,
child: TextField(
controller: upDateController),
),
],
),
RaisedButton(
child: Text('更新'),
onPressed: () async {
Memo updateMemo = Memo(
id: _selectedvalue,
text: upDateController.text);
await Memo.updateMemo(updateMemo);
final List<Memo> memos =
await Memo.getMemos();
super.setState(() {
_memoList = memos;
});
upDateController.clear();
Navigator.pop(context);
},
),
],
);
},
),
);
});
}),
],
),
);
}
}

是非動かしてみましょう。

では、今回の記事は以上です。ほかにもFlutter関連の記事を多数記載しています。興味あればサイト内見ていってください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Flutter
スポンサーリンク
シェアする
スポンサーリンク
ともぶろぐ
スポンサーリンク

コメント

タイトルとURLをコピーしました