-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Need change dark mode theme #3105
Comments
I use this class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return GetBuilder(
init: MainController(),
builder: (_) {
return GetMaterialApp(
title: "Lestaripedia",
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.green,
brightness: Brightness.light,
),
useMaterial3: true,
),
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.green,
brightness: Brightness.dark,
),
useMaterial3: true,
),
themeMode: _.isDarkMode.value ? ThemeMode.dark : ThemeMode.light,
home: const LoginUi(),
);
});
}
} just need to call update() |
1. Create a Theme FolderCreate a folder named 2. Define Themes in Separate FilesInside the File: import 'package:flutter/material.dart';
import '../widgets/space.dart';
import 'colors.dart';
class AppTheme {
static ThemeData get theme {
return ThemeData(
scaffoldBackgroundColor: AppColors.white,
dialogBackgroundColor: AppColors.white,
dialogTheme: const DialogTheme(
backgroundColor: AppColors.white,
surfaceTintColor: AppColors.white,
),
primaryColor: AppColors.primary,
cardColor: AppColors.white,
appBarTheme: const AppBarTheme(
backgroundColor: AppColors.white,
iconTheme: IconThemeData(color: AppColors.black),
surfaceTintColor: Colors.transparent,
),
chipTheme: ChipThemeData(
padding: simPad(5, 5),
shape: const StadiumBorder(
side: BorderSide.none,
),
side: BorderSide.none,
),
primaryColorLight: AppColors.white,
popupMenuTheme: const PopupMenuThemeData(color: AppColors.white),
);
}
static ThemeData get darkTheme {
return ThemeData(
scaffoldBackgroundColor: AppColors.black,
dialogBackgroundColor: AppColors.grey900,
dialogTheme: const DialogTheme(
backgroundColor: AppColors.grey900,
surfaceTintColor: AppColors.grey900,
),
primaryColor: AppColors.primary,
cardColor: AppColors.grey850,
appBarTheme: const AppBarTheme(
backgroundColor: AppColors.grey900,
elevation: 0,
surfaceTintColor: Colors.transparent,
iconTheme: IconThemeData(color: AppColors.white),
),
chipTheme: ChipThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
dividerColor: AppColors.grey200,
primaryColorLight: AppColors.white,
popupMenuTheme: const PopupMenuThemeData(color: AppColors.grey900),
);
}
} 3. Update Your Main App FileModify your File: import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'theme/app_theme.dart';
import 'routes/app_pages.dart'; // Ensure this is the correct path to your routes file
import 'bindings/splashscreen_binding.dart'; // Ensure this is the correct path to your binding file
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(375, 812),
minTextAdapt: true,
splitScreenMode: false,
builder: (_, child) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: AppPages.INITIAL,
initialBinding: SplashscreenBinding(),
getPages: AppPages.routes,
darkTheme: AppTheme.darkTheme,
theme: AppTheme.theme,
);
},
);
}
}
void main() {
runApp(const MyApp());
} 4. Define ColorsEnsure that you have a colors file where you define all your color constants. File: import 'package:flutter/material.dart';
class AppColors {
static const Color white = Colors.white;
static const Color black = Colors.black;
static const Color primary = Colors.blue; // Replace with your primary color
static const Color grey200 = Color(0xFFEEEEEE);
static const Color grey850 = Color(0xFF1C1C1C);
static const Color grey900 = Color(0xFF121212);
} 5. Ensure
|
I prefer this solution at the moment, because I have already reserved a series of |
Yeah i forgot to add @BppleMan
this would automatically select the theme data for any theme data you create |
Currently, both
MaterialApp
andGetMaterialApp
support settingtheme
anddarkTheme
separately, butGet._rootController
can only usechangeTheme
, so I seem to have to [use any higher level widget than GetMaterialApp in order to update it].I think it should be more intuitive to call
changeTheme
inlightMode
andchangeDarkThme
indarkMode
, isn't it?getx/lib/get_navigation/src/root/root_controller.dart
Lines 59 to 70 in 9d2b872
Can I only
changeThemeMode(ThemeMode.dark)
first and thenchangeTheme
, this will call update twice, is there any problem?The text was updated successfully, but these errors were encountered: