Flutter - Locale 的可空性问题
Flutter - Nullability problem with Locale
以下代码没有编译器警告或错误。 运行 结果是：
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.
window 和语言环境都不能为空。这里的参数不能为空。错误消息很烦人，因为 trying
thisAppsLocaleNotifier = ValueNotifier(window.locale ?? Locale('en'));
导致编译器警告：
The left operand can't be null, so the right operand is never executed. Try removing the operator and the right operand.
这是代码：
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() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp() {
thisAppsLocaleNotifier = ValueNotifier(window.locale);
Localization.langCode = window.locale.languageCode;
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: thisAppsLocaleNotifier,
builder: (BuildContext context, Locale thisAppsLocale, Widget? child) =>
MaterialApp(
home: MyHomePage(),
locale: thisAppsLocale,
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: supportedLocales,
theme: ThemeData(
primarySwatch: Colors.orange,
),
title: 'input_country',
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
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}'),
ButtonBar(
alignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => setLocale(Locale('de')),
child: Text('de'),
),
ElevatedButton(
onPressed: () => setLocale(Locale('en')),
child: Text('en'),
),
ElevatedButton(
onPressed: () => setLocale(Locale('es')),
child: Text('es'),
),
],
)
],
),
),
);
}
void setLocale(Locale newLocale) {
Localization.langCode = newLocale.languageCode;
thisAppsLocaleNotifier.value = newLocale;
}
}
这是pubspec.yaml
name: qq
description: A new Flutter application.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
运行空安全模式下的代码需要什么？
这是本地化 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;
}
}
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!
此处对空安全进行了全面的解释：Null safety in Flutter。它包含一个 link 迁移指南，可帮助您迁移代码。
请注意，在 pubspec 中：
environment:
sdk: ">=2.12.0 <3.0.0"
指定 sdk 版本 >=2.12.0 启用空安全，并进行后续检查。指定任何早期版本将禁用空安全。
为了修复代码的空安全性，您需要检查不允许使用的非空值 - 错误消息通常会指出这一点。所以错误：
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;
可以通过使用 window.locale!.
断言参数不为空来修复
您对 window.locale ?? ... 的不满是因为它没有检查 window 是否为 null。
看起来是 flutter web 的一个 bug。它应该在下一个版本中得到修复
https://github.com/flutter/engine/pull/24922
您现在可以做些什么来使其在网络上运行并避免在桌面或移动设备上出现警告：
创建 3 个文件：
shared.dartmobile.dartweb.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!;
然后在您的代码中，仅导入 shared.dart 并从那里获取 Locale：
main.dart
import 'shared.dart';
final Locale locale = getLocale();
以下代码没有编译器警告或错误。 运行 结果是：
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.
window 和语言环境都不能为空。这里的参数不能为空。错误消息很烦人，因为 trying
thisAppsLocaleNotifier = ValueNotifier(window.locale ?? Locale('en'));
导致编译器警告：
The left operand can't be null, so the right operand is never executed. Try removing the operator and the right operand.
这是代码：
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() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp() {
thisAppsLocaleNotifier = ValueNotifier(window.locale);
Localization.langCode = window.locale.languageCode;
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: thisAppsLocaleNotifier,
builder: (BuildContext context, Locale thisAppsLocale, Widget? child) =>
MaterialApp(
home: MyHomePage(),
locale: thisAppsLocale,
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: supportedLocales,
theme: ThemeData(
primarySwatch: Colors.orange,
),
title: 'input_country',
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
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}'),
ButtonBar(
alignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => setLocale(Locale('de')),
child: Text('de'),
),
ElevatedButton(
onPressed: () => setLocale(Locale('en')),
child: Text('en'),
),
ElevatedButton(
onPressed: () => setLocale(Locale('es')),
child: Text('es'),
),
],
)
],
),
),
);
}
void setLocale(Locale newLocale) {
Localization.langCode = newLocale.languageCode;
thisAppsLocaleNotifier.value = newLocale;
}
}
这是pubspec.yaml
name: qq
description: A new Flutter application.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
运行空安全模式下的代码需要什么？
这是本地化 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;
}
}
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!
此处对空安全进行了全面的解释：Null safety in Flutter。它包含一个 link 迁移指南，可帮助您迁移代码。
请注意，在 pubspec 中：
environment:
sdk: ">=2.12.0 <3.0.0"
指定 sdk 版本 >=2.12.0 启用空安全，并进行后续检查。指定任何早期版本将禁用空安全。
为了修复代码的空安全性，您需要检查不允许使用的非空值 - 错误消息通常会指出这一点。所以错误：
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;
可以通过使用 window.locale!.
您对 window.locale ?? ... 的不满是因为它没有检查 window 是否为 null。
看起来是 flutter web 的一个 bug。它应该在下一个版本中得到修复
https://github.com/flutter/engine/pull/24922
您现在可以做些什么来使其在网络上运行并避免在桌面或移动设备上出现警告：
创建 3 个文件：
shared.dartmobile.dartweb.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!;
然后在您的代码中，仅导入 shared.dart 并从那里获取 Locale：
main.dart
import 'shared.dart';
final Locale locale = getLocale();