Home > Mobile >  Custom ThemeData ignored/ not applied over default theme flutter
Custom ThemeData ignored/ not applied over default theme flutter

Time:11-17

I might be missing something as my custom theme is ignored, I'm just seeing the default theme. this is the only place the theme was declared. No other widget is on top of this

main.dart:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp  (

  StreamProvider<LakoUser?>.value(
    value: AuthService().user,
    initialData: null,

    child:  MaterialApp(
      theme:  MyTheme.defaultTheme,
      debugShowCheckedModeBanner: false,

      initialRoute: 'sign_in',
      routes: {
        '/': (context) => Wrapper(),
        '/home': (context) => MainApp(),
      }
),
));
}

I don't see any problems in my theme file: themes.dart:

import 'package:flutter/material.dart';

const PrimaryColor = const Color(0xff704c24);
const PrimaryColorLight = const Color(0xFFa1784d);
const PrimaryColorDark = const Color(0xFF422400);
.... 
....  etc..

class MyTheme {
  static final ThemeData defaultTheme = _buildMyTheme();

  static ThemeData _buildMyTheme() {
    final ThemeData base = ThemeData.light();

    return base.copyWith(
      primaryColor: PrimaryColor,
      primaryColorDark: PrimaryColorDark,
      primaryColorLight: PrimaryColorLight,
      ...
      etc.
      colorScheme: ColorScheme.fromSwatch().copyWith(secondary: SecondaryColor),
    );
  }
}

CodePudding user response:

You should use the colorScheme instead of primaryColor properties.

return base.copyWith(
  colorScheme: ColorScheme(
    primary: PrimaryColor,
    ...
  ),
);

I am not sure which version of Flutter has been changed, they used ColorScheme property for material design color data.

And I assume you should create dark theme data for dark mode and declare under the MaterialApp.

-- Added --

I found a good reference about the primaryColor and colorScheme. Please refer the below link.

What is the difference between ThemeData(primaryColor: Colors.red) and providing one with ColorScheme.primary

  • Related