`Drawer` 中的 Flutter 本地化导致`Null check operator used on a null value` 错误

Question

在我首次使用 Dart/Flutter 时，我创建了一个非常简单的演示应用程序，其中包含 Drawer 中的本地化文本。该应用程序在 Android 模拟器 中编译并启动，但不久后中止并显示错误消息 Null check operator used on a null value。在Drawer 之外，本地化工作完美无缺。

我到底做错了什么以及如何解决？

版本：

Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b22742018b (12 days ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

GitHub 上提供的应用程序的完整源代码：https://github.com/DarkPurpleKnight/null_issue

main.dart：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';


void main() {
  runApp(NullIssueApp());
}

class NullIssueApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Null issue',
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('de', ''),
      ],
      home: Scaffold(
        drawer: Drawer(
          child: Row(
            children: [Text(AppLocalizations.of(context)!.helloWorld)],
          ),
        ),
      ),
    );
  }
}

日志：

Launching lib/main.dart on sdk gphone x86 in debug mode...
Running Gradle task 'assembleDebug'...
✓  Built build/app/outputs/flutter-apk/app-debug.apk.
Debug service listening on ws://127.0.0.1:40233/5JFMCufV37s=/ws
Syncing files to device sdk gphone x86...
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 

======== Exception caught by widgets library =======================================================
The following _CastError was thrown building NullIssueApp(dirty):
Null check operator used on a null value

The relevant error-causing widget was: 
  NullIssueApp file:///home/dpk/source/Android/null_issue/lib/main.dart:7:10
When the exception was thrown, this was the stack: 
#0      NullIssueApp.build (package:percent_clock/main.dart:28:57)
#1      StatelessElement.build (package:flutter/src/widgets/framework.dart:4648:28)
#2      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4574:15)
#3      Element.rebuild (package:flutter/src/widgets/framework.dart:4267:5)
#4      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4553:5)
...
====================================================================================================
D/skia    (20273):    1 Shader compilation error
D/skia    (20273):    2 ------------------------
D/skia    (20273):    3 Errors:
D/skia    (20273):    4 

Answer 1

这是因为此时您的应用程序中的AppLocalization 尚未完全初始化，因此AppLocalizations.of(context) 返回一个null 值，这会导致您在使用空检查运算符! 时崩溃。

您需要将您的Scaffold 包装在一个小部件中，以便在这个新的context 中您的AppLocalization 准备就绪。

这是我运行良好的代码示例：

class NullIssueApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Null issue',
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('de', ''),
      ],
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: Row(
          children: [Text(AppLocalizations.of(context)!.helloWorld)],
        ),
      ),
    );
  }
}

截图