Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How Can I get rid of the context dependency for using Theme on the Flutter?

in short, I have a custom Theme file and I’m using that theme on the GetMaterialApp widget.
But when I use the that themes(for instance textStyle or Icon color), I always need to context.

I mean, there is my theme class at the below .

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,
    ),
  );
}

and I’m using that on the GetMaterialApp Widget:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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,
    );
  }
}

So, When I wanna use the that theme features, I always need to context. For example:

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

That is a method that return my text widget but I don’t wanna send context like parameter to that text method.

is there any way to get rid of context dependency? Or Can I use GetX to that problem?

Many Thanks…

>Solution :

Step 1:

create a variable on top of your main.dart file like below:

final navigatorKey = GlobalKey<NavigatorState>();

Step 2:

add navigatorKey to your GetMaterialApp like below:

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

Now

use this navigatorKey anywhere to access context using the following line:

navigatorKey.currentState!.overlay!.context
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading