localization - 将小部件移动到另一个文件后，Flutter Localization 功能不起作用？

Question

起初我从 this tutorial 实现 l10n到 Flutter 的模板项目文件，这是成功的。之后，我尝试将 MyHomePage 类移动到名为 home.dart 的新文件中。它停止工作是因为当我调用 Translations.of(context) 时它返回 null。 main.dart 和 home.dart 中的 BuildContext 有什么区别？

本地化.dart

import 'dart:async';
import 'dart:convert';

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

class Translations {
  final Locale locale;
  Map<String, dynamic> _messages;

  Translations(this.locale);

  static Translations of(BuildContext context) => Localizations.of<Translations>(context, Translations);

  Future<bool> load() async {
    String fileName = 'lang/${locale.languageCode}.json';
    String data = await rootBundle.loadString(fileName);

    _messages = json.decode(data);
    return true;
  }

  String get(String key) => _messages[key] ?? "** $key not found";
}

class TranslationsDelegate extends LocalizationsDelegate<Translations> {
  @override
  bool isSupported(Locale locale) => ['en', 'id'].contains(locale.languageCode);

  @override
  Future<Translations> load(Locale locale) async {
    Translations translations = new Translations(locale);
    await translations.load();

    return translations;
  }

  @override
  bool shouldReload(LocalizationsDelegate<Translations> old) => false;

}

主.dart

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

import 'components/localization.dart';
import 'components/theme.dart';
import 'views/home.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      onGenerateTitle: (BuildContext context) {
        print(context);
        return Translations.of(context).get('app_name');
      },
      theme: appTheme,
      home: MyHomePage(
        title: "Coba",
      ),
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        TranslationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: [
        Locale("en", ""),
        Locale("id", ""),
      ],
    );
  }
}

家.飞镖

import 'package:flutter/material.dart';

import 'package:kpop_idol/components/localization.dart';


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              Translations.of(context).get('app_name'),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

不要在文件 lib/main.dart 中使用相对导入

import 'components/localization.dart';
import 'components/theme.dart';
import 'views/home.dart';

应该是

import 'package:my_package/components/localization.dart';
import 'package:my_package/components/theme.dart';
import 'package:my_package/views/home.dart';

可以点赞关注https://github.com/dart-lang/sdk/issues/33076