Flutter应用接入Supabase登录系统遇依赖解析错误求助

问题根源 #

你遇到的Couldn't resolve the package 'supabase'和Undefined name 'Supabase'错误，本质是两个问题：

• Supabase依赖包未被正确下载或链接到项目中
• Supabase初始化时机错误，未遵循正确的异步初始化流程

解决步骤 #

1. 确保依赖正确安装 #

执行以下命令重新获取并安装依赖：

flutter pub get

如果执行后仍报错，删除项目根目录下的pubspec.lock文件和.dart_tool文件夹，再重新执行上述命令。

2. 修正Supabase初始化逻辑 #

Supabase初始化必须在runApp之前完成，且需先确保Flutter绑定初始化。修改main.dart如下：

// main.dart
import 'package:flutter/material.dart';
import 'package:supabase/supabase.dart';
import 'login_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Supabase.initialize(
    url: '你的Supabase项目URL',
    anonKey: '你的Supabase匿名密钥',
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Supabase 登录',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const LoginPage(),
    );
  }
}

3. 实现基于Supabase的登录验证逻辑 #

假设你已在Supabase中创建了users表，包含username和password字段（生产环境请勿明文存储密码，建议使用Supabase自带认证系统）。修改login_page.dart添加验证逻辑：

// login_page.dart
import 'package:flutter/material.dart';
import 'package:supabase/supabase.dart';
import 'home_page.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LoginForm(),
      ),
    );
  }
}

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoading = false;

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  Future<void> _login() async {
    if (_formKey.currentState?.validate() ?? false) {
      setState(() => _isLoading = true);
      final username = _usernameController.text;
      final password = _passwordController.text;

      // 查询Supabase用户表验证账号密码
      try {
        final response = await Supabase.instance.client
            .from('users')
            .select()
            .eq('username', username)
            .eq('password', password)
            .single();

        if (mounted) {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => const HomePage()),
          );
        }
      } catch (e) {
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('用户名或密码错误')),
          );
        }
      }

      setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
            controller: _usernameController,
            decoration: const InputDecoration(labelText: '用户名'),
            validator: (value) => value?.isEmpty ?? true ? '请输入用户名' : null,
            enabled: !_isLoading,
          ),
          TextFormField(
            controller: _passwordController,
            obscureText: true,
            decoration: const InputDecoration(labelText: '密码'),
            validator: (value) => value?.isEmpty ?? true ? '请输入密码' : null,
            enabled: !_isLoading,
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: _isLoading ? null : _login,
            child: _isLoading
                ? const CircularProgressIndicator(color: Colors.white)
                : const Text('登录'),
          ),
        ],
      ),
    );
  }
}

4. 关键注意事项 #

• 生产环境禁止明文存储密码，建议使用Supabase官方的signInWithPassword认证接口
• 确保Supabase项目的users表已配置合适的行级安全策略，避免数据泄露
• 替换代码中的url和anonKey为你自己的Supabase项目信息

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