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

flutter

1. 概要

上記記事で作成した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」のインストール
  • 起動
    • スマホアプリ

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

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

5. database.dartを作成

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

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

  • マウス右クリックをし、パソコンの別ディレクトリに保存

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;
  }
  setState(() {
    Cnt cnt = cnts.singleWhere((element) => element.id == 1);
    _counter = cnt.cnt!;
  });
}

11. 参考

関連記事

  1. 【Widget of the Week】#11 SliverAppBa…

  2. flutter

    【Flutter】ビルド,リリース,テスターへデプロイ(Flutter…

  3. 【Widget of the Week】#7 FadeTransiti…

  4. 【Widget of the Week】#4 AnimatedCont…

  5. 【予告】Widget of the Week 解説スタート!

  6. flutter

    【Flutter】開発環境構築(Flutter,VSCode,Wind…

最近の記事

  1. flutter
  2. flutter
  3. flutter

制作実績一覧

  1. Checkeys