1. 概要
上記記事で作成したFlutterのデモプロジェクトを利用し、カウンターの状態を維持するように開発してみます。
サーバーを再起動しても前回カウントした数値が設定され、続けてカウントする事ができるようにします。
- Windows11
- Flutter
- flutter pub run build_runner build
- Android Studio
- Virtual Deviceを追加
- Pixel 5 API 30 (Android 11.0 Google APIs x86)
- Virtual Deviceを追加
- 依存ライブラリーを追加
- Drift
- Sqlite
- Visual Studio Code
- Extensions「SQLite」のインストール
- 起動
- スマホアプリ
対象としては開発を１年程やってて自分で最初から構築してみたい方になります。そのため細かい用語などの説明はしません。
2. 開発者モードを変更
2-1. オンに変更
3. Demo Project
3-1. こちらを参考
4. Drift(Dependencies追加)＋Sqlite
4-1. こちらを参考
- Getting started (simonbinder.eu)
- 依存ライブラリーを追加
- dependencies
- dev_dependencies
- 追加し、保存すると下記コマンドが実行される
- flutter pub get
- 依存ライブラリーを追加
dependencies:
flutter:
sdk: flutter
drift: ^1.6.0
sqlite3_flutter_libs: ^0.5.0
path_provider: ^2.0.0
path: ^1.8.1
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^1.0.0
drift_dev: ^1.6.0
build_runner: ^2.1.105. database.dartを作成
5-1. ディレクトリやファイルを作成
- db/database.dart
- ソースコードはこちらから参考
import 'dart:io';
import 'package:drift/drift.dart';
import 'package:drift/native.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as p;
part 'database.g.dart';
class Cnts extends Table {
IntColumn get id => integer().autoIncrement()();
IntColumn get cnt => integer().nullable()();
@override
Set<Column>? get primaryKey => {id};
}
@DriftDatabase(tables: [Cnts])
class MyDatabase extends _$MyDatabase {
MyDatabase() : super(_openConnection());
@override
int get schemaVersion => 1;
}
LazyDatabase _openConnection() {
// the LazyDatabase util lets us find the right location for the file async.
return LazyDatabase(() async {
// put the database file, called db.sqlite here, into the documents folder
// for your app.
final dbFolder = await getApplicationDocumentsDirectory();
final file = File(p.join(dbFolder.path, 'cnts.db'));
return NativeDatabase(file);
});
}6. database.g.dartを自動生成
6-1. Generation the code
flutter pub run build_runner build- 「database.g.dart」が自動生成される
7. SQLを実行するメソッドを追加
7-1. 「database.dart」にメソッドを追加
Future insertCnt(Cnt cnt) => into(cnts).insert(cnt);
Future<List<Cnt>> get selectCnts => select(cnts).get();
Future updateCnt(Cnt cnt) => update(cnts).replace(cnt);7-2. 「main.dart」にロジックを追加
void _incrementCounter() {
setState(() {
_counter++;
});
_updateCnts();
}
void _updateCnts() async {
// ignore: avoid_print
print("_counter=$_counter");
var cnt = Cnt(id: 1, cnt: _counter);
List<Cnt> cnts = await database.selectCnts;
if (cnts.isEmpty) {
await database.insertCnt(cnt);
} else {
await database.updateCnt(cnt);
}
}8. Sqliteに保存される事を確認
8-1. Extension「SQLite」をインストール
8-2. Emulator
- Android Studio
- Device File Explorer
- マウス右クリックをし、パソコンの別ディレクトリに保存
8-3. 先程インストールしたVSCodeのExtensionのSQLiteで確認
- SQLite: Open Database
- Choose database from file
- 先程保存しておいたファイルを選択
- 左メニューの下に「SQLITE EXPLORER」が追加される
- 開く（実行する）と、現在保存されている値が表示される
9. サーバーを再起動するとまた「0」からカウント
9-1. サーバーを再起動
10. サーバーを再起動しても前回カウントした数値が設定されるように改修
10-1. 改修後、サーバーを再起動
@override
void initState() {
super.initState();
_initCounter();
}
void _initCounter() async {
List<Cnt> cnts = await database.selectCnts;
if (cnts.isEmpty) {
return;
}
Cnt cnt = cnts.singleWhere((element) => element.id == 1);
setState(() {
_counter = cnt.cnt!;
});
}11. 参考
投稿者プロフィール
-
開発好きなシステムエンジニアです。
卓球にハマってます。
