Flutter抽屉菜单首次加载报空值检查错误，需正常展示安全存储数据

首次打开抽屉时，getInfo()是异步方法，还没从Flutter Secure Storage读取到name数据，build方法就已经执行了，此时name为null，使用name![0]这个非空断言直接触发了空指针错误。重新打开时，name已经被异步赋值完成，所以能正常显示。另外，把name和email声明为全局变量也不符合Flutter状态管理的最佳实践，容易引发状态混乱。

1. 把状态变量移到State类内部 #

将name、email和storage放到_DrawerMenuState里，避免全局变量带来的副作用。

2. 异步获取数据后更新UI状态 #

在getInfo()方法中，拿到数据后调用setState()触发UI重建，确保数据加载完成后刷新显示。

3. 处理null状态，添加加载占位 #

在build方法中先判断name是否为null，显示加载提示或默认占位，避免直接使用非空断言。

修改后的完整代码：

class DrawerMenu extends StatefulWidget {
  final Translations translations;
  final PageController controller;

  const DrawerMenu({
    Key? key,
    required this.translations,
    required this.controller,
  }) : super(key: key);

  @override
  State<DrawerMenu> createState() => _DrawerMenuState();
}

class _DrawerMenuState extends State<DrawerMenu> {
  String? name;
  String? email;
  final FlutterSecureStorage storage = FlutterSecureStorage();

  @override
  void initState() {
    super.initState();
    getInfo();
  }

  Future<void> getInfo() async {
    final fetchedName = await storage.read(key: 'name');
    final fetchedEmail = await storage.read(key: 'email');
    setState(() {
      name = fetchedName;
      email = fetchedEmail;
    });
  }

  @override
  Widget build(BuildContext context) {
    Translations translations = Translations.of(context);
    return Drawer(
      backgroundColor: AppColors.secondaryColor,
      child: SafeArea(
        bottom: false,
        child: Column(
          children: [
            ClipOval(
              child: Container(
                color: AppColors.primaryColor,
                height: 60.0,
                width: 60.0,
                child: Center(
                  // 处理name为null的情况，显示加载指示器或默认字符
                  child: name != null
                      ? Text(
                          name![0],
                          style: const TextStyle(
                              color: AppColors.secondaryColor,
                              fontSize: 30,
                              fontWeight: FontWeight.bold),
                        )
                      : const CircularProgressIndicator(
                          color: AppColors.secondaryColor,
                        ),
                ),
              ),
            ),
            // 其他菜单内容...
          ],
        ),
      ),
    );
  }
}

• 状态私有化：把相关变量放到State类内部，确保状态仅属于当前组件，避免全局变量引发的意外问题。
• 异步更新UI：通过setState()通知框架重新构建UI，保证数据加载完成后自动刷新显示内容。
• 空安全处理：提前判断name是否为空，用加载指示器或默认字符替代直接断言，彻底避免空指针崩溃。
• 规范类型声明：给getInfo()加上Future<void>返回类型，符合Dart的类型规范。

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