Flutter跨文件调用LoginButton自定义组件报'不是函数'错误

• 未在MyHomePage.dart中导入LoginButton.dart文件。Dart跨文件调用类、组件必须显式导入对应文件，否则编译器无法识别LoginButton类名，直接抛出找不到方法/函数的错误。
• 现有组件存在逻辑缺陷：LoginButton内部单独定义的邮箱、密码输入控制器未和页面输入框绑定，即便导入成功，点击登录时也无法获取用户输入的内容，会传空值导致登录失败。

1. 补全文件导入 #

打开MyHomePage.dart，在文件最顶部（所有类定义之前）加入导入语句，路径需和实际文件存放位置匹配：

• 如果LoginButton.dart和MyHomePage.dart在同一目录下，直接添加：

import 'LoginButton.dart';

• 如果LoginButton.dart存放在lib下的widgets等子目录，对应修改路径即可，例如：

import 'widgets/LoginButton.dart';

注意：Flutter编译时对文件名、路径大小写敏感，导入路径必须和实际文件名完全一致，不要随意修改大小写。

2. 修正LoginButton组件逻辑 #

删除组件内部单独定义的TextEditingController，改为接收父组件传入的控制器，确保能拿到页面输入框的真实内容，修正后的LoginButton.dart代码如下：

// 补全基础依赖导入
import 'package:flutter/material.dart';
// 导入你自己封装的Authenticator类对应文件
// import 'xxx/authenticator.dart';

class LoginButton extends StatelessWidget {
  // 声明接收父组件传入的两个输入控制器
  final TextEditingController emailController;
  final TextEditingController passwordController;

  // 构造函数要求必传控制器参数
  const LoginButton({
    Key? key,
    required this.emailController,
    required this.passwordController,
  }) : super(key: key);

  static const String routeName = '/LoginButton';
  @override
  Widget build(BuildContext context) {
    return Material(
        elevation: 5.0,
        borderRadius: BorderRadius.circular(30.0),
        color: Colors.black,
        child: MaterialButton(
            minWidth: MediaQuery.of(context).size.width,
            padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            textColor: Colors.white,
            child: Text("Login"),
            onPressed: () async {
              // 从传入的控制器获取用户输入内容
              var result = await Authenticator()
                  .signIn(email: emailController.text, password: passwordController.text);
              if (result) {
                Navigator.push(context, MaterialPageRoute<void>(
                  builder: (BuildContext context) {
                    return Scaffold(
                        appBar: AppBar(
                            backgroundColor: Colors.black,
                            title: Text("HomeChef")),
                        drawer: Drawer(
                            child: ListView(
                          padding: EdgeInsets.zero,
                          children: const <Widget>[
                            DrawerHeader(
                              decoration: BoxDecoration(
                                color: Colors.black,
                              ),
                              child: Text(
                                'My Account',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                ),
                              ),
                            ),
                            ListTile(
                              leading: Icon(Icons.person_outline_sharp),
                              title: Text('Profile'),
                            ),
                            ListTile(
                              leading: Icon(Icons.favorite_border),
                              title: Text("Liked Recipies"),
                            ),
                            ListTile(
                              leading: Icon(Icons.play_circle_outline),
                              title: Text('Playlists'),
                            )
                          ],
                        )));
                  },
                ));
              }
            }));
  }
}

3. 修改组件调用代码 #

将MyHomePage.dart中原来的LoginButton()调用代码，替换为传参形式，传入页面已定义好的两个输入控制器：

LoginButton(
  emailController: email,
  passwordController: password,
),

4. 清理缓存重编译（导入后仍报类识别错误时操作） #

在项目终端依次执行以下命令清理编译缓存，重启编辑器后重新运行项目即可：

flutter clean
flutter pub get

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