如何摆脱在Flutter上使用主题的上下文依赖

Question

简而言之，我有一个自定义的主题文件，并且在GetMaterialApp小部件上使用该主题。但当我使用这些主题(例如textStyle或Icon颜色(时，我总是需要上下文。

我的意思是，下面有我的主题课。

import 'package:flutter/material.dart';
import 'package:professional_app/Utilities/colors.dart';
class CustomLightTheme {
final ThemeData theme = ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
textStyle: const TextStyle(
fontWeight: FontWeight.bold,
),
primary: Colors.blue,
onPrimary: Colors.white,
)),
textTheme: TextTheme(
bodyText2: TextStyle(
fontFamily: "CormorantSC",
fontSize: 16,
color: colorOfPinkSwan.withOpacity(0.5),
overflow: TextOverflow.ellipsis,
),
bodyText1: const TextStyle(
fontSize: 24,
color: Colors.white,
overflow: TextOverflow.ellipsis,
)),
buttonTheme: ButtonThemeData(
buttonColor: colorOfDullLavender,
),
appBarTheme: AppBarTheme(
backgroundColor: colorOfPerfume,
foregroundColor: colorOfCinder,
),
);
}

我正在GetMaterialApp小工具上使用它：

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
debugPrint("MyApp class has worked.");
return GetMaterialApp(
transitionDuration: durationOfLow,
defaultTransition: Transition.fadeIn,
getPages: getPages,
theme: CustomLightTheme().theme,
initialRoute: pathOfHomePage,
unknownRoute:
GetPage(name: pathOfErrorPage, page: () => const ErrorPage()),
debugShowCheckedModeBanner: false,
);
}
}

所以，当我想使用这个主题功能时，我总是需要上下文。例如：

_text({required BuildContext context, required String text}) {
return Text(
style: Theme.of(context).textTheme.bodyText1,
text,
textAlign: TextAlign.justify,
maxLines: 2,
overflow: TextOverflow.ellipsis,
);
}

这是一个返回文本小部件的方法，但我不想向该文本方法发送类似上下文的参数。

有什么方法可以摆脱上下文依赖吗？或者我可以使用GetX来解决这个问题吗？

非常感谢。。。

Answer 1

步骤1:

在main.dart文件上创建一个变量，如下所示：

final navigatorKey = GlobalKey<NavigatorState>();

步骤2:

将navigatorKey添加到GetMaterialApp中，如下所示：

return GetMaterialApp(
navigatorKey: navigatorKey,
...
);

现在

使用navigatorKey在任何位置使用以下行访问上下文：

navigatorKey.currentState!.overlay!.context