Flutter技术问询：如何为自定义类添加Context并获取Context以实现本地化（导入dart.js无效问题）

Hey there! Let's break down how to solve these two linked Flutter problems you're dealing with—getting a BuildContext into a custom class and using it for localization. First off, forget about dart.js; that's for Dart-to-JS web interop, not Flutter context management, so it's totally the wrong tool here. Here are the practical, Flutter-native solutions I've used successfully:

1. Pass Context via Constructor (Simplest & Recommended) #

The most straightforward and safe way is to pass the context directly when you initialize your custom class. This avoids any global state headaches and keeps things explicit.

Example Code: #

// Your custom class
class LocalizedHelper {
  final BuildContext _context;

  // Inject context through the constructor
  LocalizedHelper(this._context);

  // Use context to fetch localized strings
  String getGreeting() {
    // Replace with your actual localization class/method
    return AppLocalizations.of(_context)?.greeting ?? "Hello!";
  }
}

Then, when using this class from a widget:

// Inside a Stateful/Stateless Widget's build method
@override
Widget build(BuildContext context) {
  final localizedHelper = LocalizedHelper(context);
  return Text(localizedHelper.getGreeting());
}

Pro Tip: If your custom class might outlive the widget (e.g., a long-running service), wrap the context in a WeakReference to prevent memory leaks:

class LocalizedHelper {
  final WeakReference<BuildContext> _contextRef;

  LocalizedHelper(BuildContext context) : _contextRef = WeakReference(context);

  String? getGreeting() {
    final context = _contextRef.target;
    if (context == null) return null; // Handle null case as needed
    return AppLocalizations.of(context)?.greeting;
  }
}

2. Use a Global Navigator Key for Global Context Access #

If you need to access context from a class that can't easily get it via constructor (like a singleton utility class), use a GlobalKey attached to your app's MaterialApp or CupertinoApp.

Step 1: Define the Global Key #

In your main app file:

final GlobalKey<NavigatorState> _appNavigatorKey = GlobalKey<NavigatorState>();

Step 2: Attach It to Your App #

MaterialApp(
  navigatorKey: _appNavigatorKey,
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  // Other app configuration...
)

Step 3: Access Context in Your Custom Class #

class GlobalLocalizationHelper {
  // Get the current context from the global key
  BuildContext get _context {
    final context = _appNavigatorKey.currentContext;
    if (context == null) {
      throw Exception("Context is not available! Make sure the app is initialized.");
    }
    return context;
  }

  String getAppTitle() {
    return AppLocalizations.of(_context)?.appTitle ?? "My App";
  }
}

Note: Be careful with this approach—only use it when you really need global access. Always prefer constructor injection first, as it makes your code more testable and easier to track context usage.

Why dart.js Didn't Work #

Just to clarify: dart:js is a library for interacting with JavaScript when building Flutter Web apps. It has nothing to do with accessing Flutter's BuildContext, which is a core part of the Flutter widget tree system. That's why importing it didn't fix your issue.

内容的提问来源于stack exchange，提问作者Altayeb Yousif