【Flutter】Demoプロジェクトの値の状態を管理(Flutter,VSCode,Counter,Data,Drift,Sqlite)

ホーム
BLOG
【Flutter】
【Flutter】Demoプロジェクトの値の状態を管理(…

【Flutter】
2022.06.05

【Flutter】Demoプロジェクトの値の状態を管理(Flutter,VSCode,Counter,Data,Drift,Sqlite)

概要
開発者モードを変更
Demo Project
Drift(Dependencies追加)＋Sqlite
database.dartを作成
database.g.dartを自動生成
SQLを実行するメソッドを追加
Sqliteに保存される事を確認
サーバーを再起動するとまた「0」からカウント
サーバーを再起動しても前回カウントした数値が設定されるように改修
参考

1. 概要

【Flutter】開発環境構築(Flutter,VSCode,Windows11)

上記記事で作成したFlutterのデモプロジェクトを利用し、カウンターの状態を維持するように開発してみます。

サーバーを再起動しても前回カウントした数値が設定され、続けてカウントする事ができるようにします。

Windows11
Flutter
- flutter pub run build_runner build
Android Studio
- Virtual Deviceを追加
  - Pixel 5 API 30 (Android 11.0 Google APIs x86)
依存ライブラリーを追加
- Drift
- Sqlite
Visual Studio Code
- Extensions「SQLite」のインストール
起動
- スマホアプリ

対象としては開発を１年程やってて自分で最初から構築してみたい方になります。そのため細かい用語などの説明はしません。

2. 開発者モードを変更

2-1. オンに変更

3. Demo Project

3-1. こちらを参考

https://isub.co.jp/flutter/flutter-dev-vscode-on-windows11/#create-project

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.10

5. database.dartを作成

5-1. ディレクトリやファイルを作成

db/database.dart
ソースコードはこちらから参考
- Getting started (simonbinder.eu)

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);

drift/database.dart at master · simolus3/drift · GitHub

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!;
  });
}