Flutter数据库可视化插件drift_db_viewer的使用

drift_db_viewer 是一个方便在开发过程中查看Flutter应用中数据库内容的插件。它允许我们在不导出数据库文件的情况下直接在应用内查看和过滤数据库数据。

示例

设置

添加依赖到 pubspec.yaml

首先，在你的 pubspec.yaml 文件中添加 drift_db_viewer 依赖：

dependencies:
  drift_db_viewer: <latest-version>

请确保将 <latest-version> 替换为最新的版本号。

使用方法

要在应用中使用 DriftDbViewer，你需要创建一个路由并传递你的数据库实例给它。例如：

import 'package:flutter/material.dart';
import 'package:drift_db_viewer/drift_db_viewer.dart';
import 'my_database.dart'; // 假设这是你定义的数据库类

void main() {
  final db = MyDatabase(); // 这应该是一个单例
  runApp(MyApp(db: db));
}

class MyApp extends StatelessWidget {
  final MyDatabase db;

  MyApp({required this.db});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drift DB Viewer Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(builder: (context) => DriftDbViewer(db))
              );
            },
            child: Text('View Database'),
          ),
        ),
      ),
    );
  }
}

Drift配置

使用命名列

当你在表中使用命名列时，需要为该列添加 @JsonKey 注解，否则无法隐藏该表。例如：

import 'package:drift/drift.dart';

class Todos extends Table {
  IntColumn get id => integer().autoIncrement()();

  TextColumn get title => text().withLength(min: 6, max: 32)();

  @JsonKey('body') // This is required for the drift_db_viewer.
  TextColumn get content => text().named('body')();

  IntColumn get category => integer().nullable()();
}

完整示例 Demo

以下是一个完整的示例项目结构：

example/
├── lib/
│   ├── main.dart
│   └── my_database.dart
└── pubspec.yaml

main.dart:

import 'package:flutter/material.dart';
import 'package:drift_db_viewer/drift_db_viewer.dart';
import 'my_database.dart';

void main() {
  final db = MyDatabase();
  runApp(MyApp(db: db));
}

class MyApp extends StatelessWidget {
  final MyDatabase db;

  MyApp({required this.db});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drift DB Viewer Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(builder: (context) => DriftDbViewer(db))
              );
            },
            child: Text('View Database'),
          ),
        ),
      ),
    );
  }
}

my_database.dart:

import 'package:drift/drift.dart';
import 'package:path/path.dart' as p;
import 'package:path_provider/path_provider.dart';

part 'my_database.g.dart';

@DriftDatabase(tables: [Todos])
class MyDatabase extends _$MyDatabase {
  MyDatabase() : super(_openConnection());

  @override
  int get schemaVersion => 1;
}

LazyDatabase _openConnection() {
  return LazyDatabase(() async {
    final dbFolder = await getApplicationDocumentsDirectory();
    final file = File(p.join(dbFolder.path, 'db.sqlite'));
    return VmDatabase(file);
  });
}

class Todos extends Table {
  IntColumn get id => integer().autoIncrement()();

  TextColumn get title => text().withLength(min: 6, max: 32)();

  @JsonKey('body')
  TextColumn get content => text().named('body')();

  IntColumn get category => integer().nullable()();
}

通过以上步骤和代码示例，你可以轻松地在Flutter应用中集成 drift_db_viewer 插件，从而更方便地查看和调试数据库内容。