Flutter – Nullability problem with Locale


Below code has no compiler warnings or errors. Running it results in:

lib/main.dart:26:51: Error: The argument type 'Locale?' can't be assigned to the parameter type 'Locale' because 'Locale?' is nullable and 'Locale' isn't.
 - 'Locale' is from 'dart:ui'.
    thisAppsLocaleNotifier = ValueNotifier(window.locale);
lib/main.dart:27:43: Error: Property 'languageCode' cannot be accessed on 'Locale?' because it is potentially null.
 - 'Locale' is from 'dart:ui'.
Try accessing using ?. instead.
    Localization.langCode = window.locale.languageCode;
Failed to compile application.

Neither window nor locale could be null. No parameters here can be null. The error message is quite annoying because trying

thisAppsLocaleNotifier = ValueNotifier(window.locale ?? Locale('en'));

Results in a compiler warning:

The left operand can't be null, so the right operand is never executed.  Try removing the operator and the right operand.

This is the code:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'main.i18n.dart';

/// Supported locales. First entry `en` is default.
const List<Locale> supportedLocales = [
  Locale('en', 'US'),
  Locale('de', 'DE'),
  Locale('es', 'ES'),

late ValueNotifier<Locale> thisAppsLocaleNotifier;

/// Entry point for example application
void main() {

class MyApp extends StatelessWidget {
  MyApp() {
    thisAppsLocaleNotifier = ValueNotifier(window.locale);
    Localization.langCode = window.locale.languageCode;

  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: thisAppsLocaleNotifier,
      builder: (BuildContext context, Locale thisAppsLocale, Widget? child) =>
        home: MyHomePage(),
        locale: thisAppsLocale,
        localizationsDelegates: [
        supportedLocales: supportedLocales,
        theme: ThemeData(
          primarySwatch: Colors.orange,
        title: 'input_country',

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    print('_MyHomePageState build');
    return Scaffold(
      appBar: AppBar(
        title: Text('App Title'.i18n),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text('thisAppsLocale = ${thisAppsLocaleNotifier.value} / langCode ='
                ' ${Localization.langCode}'),
              alignment: MainAxisAlignment.center,
              children: [
                  onPressed: () => setLocale(Locale('de')),
                  child: Text('de'),
                  onPressed: () => setLocale(Locale('en')),
                  child: Text('en'),
                  onPressed: () => setLocale(Locale('es')),
                  child: Text('es'),

  void setLocale(Locale newLocale) {
    Localization.langCode = newLocale.languageCode;
    thisAppsLocaleNotifier.value = newLocale;

And this is pubspec.yaml

name: qq
description: A new Flutter application.
publish_to: 'none'
version: 1.0.0+1

  sdk: ">=2.12.0 <3.0.0"

    sdk: flutter
    sdk: flutter

    sdk: flutter

  uses-material-design: true

What is required to run the code in null-safety mode?

This is the localization class main.i18n.dart:

extension Localization on String {
  static String langCode = 'en';

  String get i18n => localize(this, _t);

  static final Map<String, Map<String, String>> _t = {
    'All': {
      'de': 'Alle',
      'es': 'Todas',
    'Example': {
      'de': 'Beispiel',
      'es': 'Ejemplo',
    'Languages': {
      'de': 'Sprachen',
      'es': 'Idiomas',
    'Selectables': {
      'de': 'Einträge',
      'es': 'Entradas',

  String localize(String english, Map<String, Map<String, String>> t10ns) {
    if (langCode != 'en') {
      Map<String, String>? _t10ns = t10ns[english];
      if (_t10ns == null) {
        print('No translations found for "$english"');
      } else {
        String? translated = _t10ns[langCode];
        if (translated == null) {
          print('Translation to language "$langCode" missing for "$english"');
        } else {
          return translated;
    return english;

Output of Flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 10.0.19042.867], locale de-DE)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] Connected device (3 available)

• No issues found!


It looks like it was a bug with flutter web. It should be fixed in one of the next releases


What you can do for now to make it work on web and avoid warnings on desktop or mobiles:

Create 3 files:

  • shared.dart
  • mobile.dart
  • web.dart
// shared.dart
export 'web.dart' if (dart.library.io) 'mobile.dart';
// mobile.dart
import 'dart:ui';

Locale getLocale() => window.locale;
// web.dart
import 'dart:ui';

// ignore: unnecessary_non_null_assertion
Locale getLocale() => window.locale!;

Then in your code, only import shared.dart and get the Locale from there:

import 'shared.dart';

final Locale locale = getLocale();

Answered By – Valentin Vignal

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.