Flutter项目因组件更新报错：showSnackBar与FlatButton未定义

遇到的错误 #

1. ScaffoldState类未定义showSnackBar方法 #

lib/screens/login_screen.dart:52:12: Error: The method 'showSnackBar' isn't defined for the class 'ScaffoldState'.
 - 'ScaffoldState' is from 'package:flutter/src/material/scaffold.dart' ('/C:/src/flutter/packages/flutter/lib/src/material/scaffold.dart').
Try correcting the name to the name of an existing method, or defining a method named 'showSnackBar'.
          .showSnackBar(SnackBar(content: Text(e.message)));
           ^^^^^^^^^^^^
lib/screens/login_screen.dart:87:43: Error: The method 'showSnackBar' isn't defined for the class 'ScaffoldState'.
 - 'ScaffoldState' is from 'package:flutter/src/material/scaffold.dart' ('/C:/src/flutter/packages/flutter/lib/src/material/scaffold.dart').
Try correcting the name to the name of an existing method, or defining a method named 'showSnackBar'.
                _scaffoldKey.currentState.showSnackBar(
                                          ^^^^^^^^^^^^

2. _LoginScreenState类未定义FlatButton方法 #

lib/screens/login_screen.dart:69:9: Error: The method 'FlatButton' isn't defined for the class '_LoginScreenState'.
 - '_LoginScreenState' is from 'package:phone_verification/screens/login_screen.dart' ('lib/screens/login_screen.dart').
Try correcting the name to the name of an existing method, or defining a method named 'FlatButton'.
        FlatButton(
        ^^^^^^^^^^
lib/screens/login_screen.dart:122:9: Error: The method 'FlatButton' isn't defined for the class '_LoginScreenState'.
 - '_LoginScreenState' is from 'package:phone_verification/screens/login_screen.dart' ('lib/screens/login_screen.dart').
Try correcting the name to the name of an existing method, or defining a method named 'FlatButton'.
        FlatButton(
        ^^^^^^^^^

3. 额外空安全错误（截图内容翻译） #

lib/screens/login_screen.dart:141:33: Error: 无法将类型为'String?'的值分配给类型为'String'的变量。
尝试添加空检查运算符('!')。
phoneNumber: _phoneController.text,
^^^^^^^^^^^^^^^^^^^
lib/screens/login_screen.dart:172:29: Error: 参数类型'PhoneAuthCredential?'无法分配给参数类型'PhoneAuthCredential'。
尝试添加空检查运算符('!')。
credential: credential,
^

修复方案 #

1. 替换showSnackBar调用方式 #

Flutter新版本移除了ScaffoldState.showSnackBar，改用ScaffoldMessenger实现SnackBar显示：

• 原代码：

  _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(e.message)));
  

• 修改后：

  ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(e.message)));
  

若使用GlobalKey，可改为：

ScaffoldMessenger.of(_scaffoldKey.currentContext!).showSnackBar(SnackBar(content: Text(e.message)));

2. 替换FlatButton组件 #

FlatButton已被废弃，用TextButton替代，参数兼容，可直接替换组件名：

• 原代码：

  FlatButton(
    onPressed: () {},
    child: Text("登录"),
  )
  

• 修改后：

  TextButton(
    onPressed: () {},
    child: Text("登录"),
  )
  

如需自定义样式，可通过style参数调整：

TextButton(
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  ),
  onPressed: () {},
  child: Text("登录"),
)

3. 修复空安全错误 #

针对空类型不匹配问题，添加空检查运算符：

• 手机号参数修改：

  phoneNumber: _phoneController.text!,
  

• 凭证参数修改：

  credential: credential!,
  

也可先做非空判断再使用：

if (credential != null) {
  // 执行凭证相关逻辑
}

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