skip to Main Content

I’m trying to style my app globally and I have some questions about hot the properly retrieve the value like this!

This code it’s not working because there is no context at this point, but is there some way to get this value?

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

ThemeData lightTheme = ThemeData(
  useMaterial3: true,
  
  // Text Style
  textTheme: TextTheme(
    titleMedium: GoogleFonts.nunito(fontWeight: FontWeight.bold, letterSpacing: -1, fontSize: 16),
  ),

  // AppBar
  appBarTheme: AppBarTheme(
    titleTextStyle: Theme.of(context).textTheme.titleMedium,
  ),
);

2

Answers


  1. Create dark & light mode extension

    extension Context on BuildContext {
         bool get isDarkMode => Theme.of(this).brightness == Brightness.dark;
    }
    

    Create your them file

    class ConstTheme {
      /// Light theme color
      static ThemeData light = ThemeData(
        useMaterial3: true,
        fontFamily: 'DM Sans',
        colorSchemeSeed: ConstColor.primary,
        brightness: Brightness.light,
        scaffoldBackgroundColor: ConstColor.white,
        textTheme: const TextTheme(
          titleSmall: TextStyle(color: ConstColor.black),
          titleMedium: TextStyle(color: ConstColor.black),
        ),
        cardTheme: CardTheme(
          margin: EdgeInsets.zero,
          elevation: 2.0,
          color: ConstColor.white,
          clipBehavior: Clip.hardEdge,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      );
    
      /// Dark theme color
      static ThemeData dark = ThemeData(
        useMaterial3: true,
        fontFamily: 'DM Sans',
        colorSchemeSeed: ConstColor.primary,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xff151616),
        cardTheme: CardTheme(
          margin: EdgeInsets.zero,
          elevation: 2.0,
          color: const Color(0xff1C1E1F),
          // surfaceTintColor: const Color(0xff1C1E1F),
          clipBehavior: Clip.hardEdge,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          // shadowColor: Colors.white.withOpacity(0.5),
        ),
      );
    
    Login or Signup to reply.
  2. Instead of globally declaring theme data, use a class with static method returning themeData with context as parameter:

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        theme: ThemeClass.getThemeData(context),
        home: const HomePage(),
      );
    }
    
    class ThemeClass {
      static ThemeData getThemeData(BuildContext context) {
        final lightTheme = ThemeData(
          useMaterial3: true,
    
          // Text Style
          textTheme: TextTheme(
            titleMedium: GoogleFonts.nunito(
                fontWeight: FontWeight.bold, letterSpacing: -1, fontSize: 16),
          ),
    
          // AppBar
          appBarTheme: AppBarTheme(
            titleTextStyle: Theme.of(context).textTheme.titleMedium,
          ),
        );
    
        return lightTheme;
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search