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

11. 参考

関連記事

  1. flutter

    【Flutter】Pankoにあみだくじ機能を追加

  2. flutter

    【Flutter】GoogleMapを使用したアプリの開発について

  3. flutter

    【Flutter】GoogleMapを使用したアプリの開発について P…

  4. flutter

    【Flutter】Flutter実装メモ showModalBotto…

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

  6. flutter

    【Flutter】Firebase Dynamic Linksを使う

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys