Flutter Web集成SQFlite数据库点击Insert按钮报错求助

在Chrome（Web端）运行Flutter项目时，UI显示正常，但点击Insert按钮执行数据插入操作时，抛出以下错误：
DartError: MissingPluginException(No implementation found for method getApplicationDocumentsDirectory on channel plugins.flutter.io/path_provider)
报错堆栈指向dart-sdk及flutter/services相关文件。

项目相关代码 #

home.dart #

import 'package:flutter/material.dart';
import 'package:local_database/db_handler.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SQFLite Database"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: ()async{
            await DBHandler().insertData();
            // final data= await DBHandler().readData();
            // print(data);
          },child:  Text('Insert'),
        ),
      ),
    );
  }
}

db_handler.dart #

import 'dart:io';

import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DBHandler{
  Database? _database;

  Future<Database?> get database  async{
    if(_database!=null){
      return _database;
    }
    Directory directory =  await getApplicationDocumentsDirectory();
    String path=   join(directory.path,'mydatabase.db');
    _database = await openDatabase(path,version: 1,onCreate: (db, version) {
      db.execute(
        '''
        CREATE TABLE databasetable(
        id INTEGER PRIMARY KEY ,
        name TEXT ,
         age INTEGER
        '''
      );
     },);
    return _database;
  }

  insertData()async{
    Database? db= await database;
    db!.insert('databasetable',{
     'id':1,
     'name': 'John',
     'age': 18,
   });
  }

  readData() async{
    Database? db= await database;
    final list = await db!.query('databasetable');
    return list;
  }
}

报错截图 #

解决方案 #

核心原因 #

SQFlite官方库不支持Web平台，同时getApplicationDocumentsDirectory是移动端专属API，Web端无对应实现，因此触发MissingPluginException。

方案1：使用sqflite_common_ffi_web实现跨平台兼容 #

这是官方提供的Web端兼容版本，步骤如下：

1. 添加依赖到pubspec.yaml：

dependencies:
  sqflite_common_ffi_web: ^2.0.0+1
  path_provider_web: ^2.0.0

2. 修改db_handler.dart代码，适配Web平台：

import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
// 新增Web相关依赖导入
import 'package:sqflite_common_ffi_web/sqflite_ffi_web.dart';
import 'package:path_provider_web/path_provider_web.dart';

class DBHandler{
  Database? _database;

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

    // 区分Web与原生平台
    if (Platform.isWeb) {
      // 初始化Web端SQFlite
      sqfliteFfiWebInit();
      _database = await databaseFactoryFfiWeb.openDatabase('mydatabase.db');
    } else {
      Directory directory = await getApplicationDocumentsDirectory();
      String path = join(directory.path,'mydatabase.db');
      _database = await openDatabase(path,version: 1,onCreate: (db, version) {
        // 修复原SQL语句缺少闭合括号的问题
        db.execute(
          '''
          CREATE TABLE databasetable(
            id INTEGER PRIMARY KEY,
            name TEXT,
            age INTEGER
          )
          '''
        );
      },);
    }
    return _database;
  }

  insertData()async{
    Database? db= await database;
    db!.insert('databasetable',{
      'id':1,
      'name': 'John',
      'age': 18,
    });
  }

  readData() async{
    Database? db= await database;
    final list = await db!.query('databasetable');
    return list;
  }
}

3. 执行flutter pub get更新依赖后重新运行项目。

方案2：使用Web原生存储方案 #

如果不需要跨平台兼容，Web端可以选择更轻量的存储方案：

• 简单键值对存储：使用shared_preferences库
• 复杂数据结构存储：使用hive库，支持对象存储与查询

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