Flutter localization in `Drawer` leads to `Null check operator used on a null value` error

Question

For my debut with Dart/Flutter I created a very simple demo app with a localized text within a Drawer. The app compiles and starts in the Android Emulator, but only to abort shortly after with the error message Null check operator used on a null value. Outside of the Drawer, the localization works flawlessly.

What exactly did I do wrong and how to fix it?

Versions:

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

Complete source code of the app available on 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)],
          ),
        ),
      ),
    );
  }
}

Log:

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

score 5 · Accepted Answer · answered Jun 04 '21 at 18:54

It is because at this point in your app AppLocalization is not fully initialized yet so AppLocalizations.of(context) returns a null value which cause your crash as you are using the null check operator !.

You will need to wrap your Scaffold inside a widget so in this new context your AppLocalization will be ready.

Here is my code sample that worked well:

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)],
        ),
      ),
    );
  }
}

Screenshot

Your code change works for me too. Thanks to your clear explanation, I now know how to fix the problem. — Dark Purple Knight, Jun 05 '21 at 13:34

Flutter localization in `Drawer` leads to `Null check operator used on a null value` error

1 Answers1