Flutter Web中如何使用getApplicationDocumentsDirectory()？SQLite适配问题

首先明确：原生sqflite包不支持Web平台，直接调用移动端的路径API必然报错。你需要借助sqflite_common_ffi_web包实现Web端的SQLite支持，同时通过kIsWeb区分平台处理路径逻辑。

步骤1：添加依赖 #

在pubspec.yaml中补充以下依赖：

dependencies:
  sqflite: ^2.3.0
  path_provider: ^2.1.0
  sqflite_common_ffi: ^2.3.0
  sqflite_common_ffi_web: ^0.4.0

执行flutter pub get完成依赖安装。

步骤2：配置Web端初始化 #

在main.dart的main函数中，先初始化Web端的sqflite运行环境：

import 'package:flutter/foundation.dart';
import 'package:sqflite_common_ffi/sqflite_ffi.dart';
import 'package:sqflite_common_ffi_web/sqflite_ffi_web.dart';

void main() {
  if (kIsWeb) {
    databaseFactory = databaseFactoryFfiWeb;
  }
  runApp(const MyApp());
}

步骤3：修改数据库初始化代码 #

调整原有的初始化逻辑，按平台分支处理路径：

import 'package:flutter/foundation.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:sqflite_common_ffi/sqflite_ffi.dart';

Database? _database;
final int _dbVersion = 1;

Future<Database> get database async {
  if (_database != null) {
    return _database!;
  }
  _database = await _initializeDatabase();
  return _database!;
}

Future<Database> _initializeDatabase() async {
  String path;
  
  if (kIsWeb) {
    // Web平台无本地文件系统，直接用数据库名称即可，数据会存在浏览器IndexedDB中
    path = 'annonce_database.db';
  } else {
    // 移动端保留原路径逻辑
    Directory directory = await getApplicationDocumentsDirectory();
    path = join(directory.path, 'annonce_database.db');
  }

  // 根据平台选择对应的数据工厂实现
  final factory = kIsWeb ? databaseFactoryFfiWeb : databaseFactory;
  
  return await factory.openDatabase(
    path,
    version: _dbVersion,
    onCreate: _onCreate,
  );
}

// 保留你的表创建逻辑
Future<void> _onCreate(Database db, int version) async {
  // 示例：await db.execute('CREATE TABLE your_table (id INTEGER PRIMARY KEY)');
}

关键说明 #

• Web平台没有传统的本地文件路径概念，sqflite_common_ffi_web会将数据库数据存储在浏览器的IndexedDB中，因此直接传入数据库名称即可完成初始化。
• 通过databaseFactory切换平台实现，保证移动端和Web端的数据库逻辑统一。

内容的提问来源于stack exchange，提问作者imane imane