DarkMode Feature in Flutter
We help to minimize the developer's work the form of providing bug-free codes. If you are working in the Dark mode feature, then you can simple copy the code provided below in the blog it will help you to incorporprate dark mode feature in your App. We don't use unstable Plugins that slows down your project.
main.dart
import 'package:flutter/material.dart';
import 'package:nb_utils/nb_utils.dart';
import './store/AppStore.dart';
import './utils/AppTheme.dart';
import 'utils/DAColors.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
AppStore appStore = AppStore();
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await initialize(aLocaleLanguageList: [
LanguageDataModel(
id: 1,
name: 'English',
languageCode: 'en',
fullLanguageCode: 'en-US',
flag: 'images/flag/ic_us.png'),
LanguageDataModel(
id: 2,
name: 'Hindi',
languageCode: 'hi',
fullLanguageCode: 'hi-IN',
flag: 'images/flag/ic_hi.png'),
LanguageDataModel(
id: 3,
name: 'Arabic',
languageCode: 'ar',
fullLanguageCode: 'ar-AR',
flag: 'images/flag/ic_ar.png'),
LanguageDataModel(
id: 4,
name: 'French',
languageCode: 'fr',
fullLanguageCode: 'fr-FR',
flag: 'images/flag/ic_fr.png'),
]);
appStore.toggleDarkMode(value: getBoolAsync('isDarkModeOnPref'));
defaultRadius = 10;
defaultToastGravityGlobal = ToastGravity.BOTTOM;
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Observer(
builder: (_) => MaterialApp(
debugShowCheckedModeBanner: false,
title:
'${'Cloud Storage'}${!isMobile ? ' ${platformName()}' : ''}',
home: const MyDarkMode(),
theme: !appStore.isDarkModeOn
? AppThemeData.lightTheme
: AppThemeData.darkTheme,
));
}
}
class MyDarkMode extends StatelessWidget {
const MyDarkMode({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: appBarWidget('Darkmode Feature',
titleTextStyle: boldTextStyle(size: 25), color: context.cardColor),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AppButton(
width: context.width(),
color: primaryColor,
text: 'Enable DarkMode',
textStyle: boldTextStyle(color: white),
onTap: (() {
appStore.toggleDarkMode();
})),
],
),
);
}
}
AppTheme.dart
import '../utils/DAColors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:nb_utils/nb_utils.dart';
class AppThemeData {
//
AppThemeData._();
static final ThemeData lightTheme = ThemeData(
scaffoldBackgroundColor: whiteColor,
primaryColor: appColorPrimary,
primaryColorDark: appColorPrimary,
errorColor: Colors.orange,
hoverColor: Colors.white54,
dividerColor: viewLineColor,
fontFamily: GoogleFonts.josefinSans().fontFamily,
appBarTheme: AppBarTheme(
color: white,
iconTheme: IconThemeData(color: textPrimaryColor),
systemOverlayStyle:
SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark),
),
textSelectionTheme: TextSelectionThemeData(cursorColor: Colors.black),
colorScheme: ColorScheme.light(
primary: appColorPrimary, primaryVariant: appColorPrimary),
cardTheme: CardTheme(color: Colors.white),
cardColor: Colors.white,
iconTheme: IconThemeData(color: textPrimaryColor),
bottomSheetTheme: BottomSheetThemeData(backgroundColor: whiteColor),
textTheme: TextTheme(
button: TextStyle(color: appColorPrimary),
headline6: TextStyle(color: textPrimaryColor),
subtitle2: TextStyle(color: textSecondaryColor),
),
visualDensity: VisualDensity.adaptivePlatformDensity,
).copyWith(
pageTransitionsTheme:
PageTransitionsTheme(builders: <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: OpenUpwardsPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
TargetPlatform.linux: OpenUpwardsPageTransitionsBuilder(),
TargetPlatform.macOS: OpenUpwardsPageTransitionsBuilder(),
}),
);
static final ThemeData darkTheme = ThemeData(
scaffoldBackgroundColor: appBackgroundColorDark,
highlightColor: appBackgroundColorDark,
errorColor: Color(0xFFCF6676),
appBarTheme: AppBarTheme(
color: appBackgroundColorDark,
iconTheme: IconThemeData(color: blackColor),
systemOverlayStyle:
SystemUiOverlayStyle(statusBarIconBrightness: Brightness.light),
),
primaryColor: color_primary_black,
dividerColor: Color(0xFFDADADA).withOpacity(0.3),
primaryColorDark: color_primary_black,
textSelectionTheme: TextSelectionThemeData(cursorColor: Colors.white),
hoverColor: Colors.black12,
fontFamily: GoogleFonts.josefinSans().fontFamily,
bottomSheetTheme:
BottomSheetThemeData(backgroundColor: appBackgroundColorDark),
primaryTextTheme: TextTheme(
headline6: primaryTextStyle(color: Colors.white),
overline: primaryTextStyle(color: Colors.white)),
cardTheme: CardTheme(color: cardBackgroundBlackDark),
cardColor: appSecondaryBackgroundColor,
iconTheme: IconThemeData(color: whiteColor),
textTheme: TextTheme(
button: TextStyle(color: color_primary_black),
headline6: TextStyle(color: whiteColor),
subtitle2: TextStyle(color: Colors.white54),
),
visualDensity: VisualDensity.adaptivePlatformDensity,
colorScheme: ColorScheme.dark(
primary: appBackgroundColorDark,
onPrimary: cardBackgroundBlackDark,
primaryVariant: color_primary_black)
.copyWith(secondary: whiteColor),
).copyWith(
pageTransitionsTheme:
PageTransitionsTheme(builders: <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: OpenUpwardsPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
TargetPlatform.linux: OpenUpwardsPageTransitionsBuilder(),
TargetPlatform.macOS: OpenUpwardsPageTransitionsBuilder(),
}),
);
}
DAColors.dart
import 'package:flutter/material.dart';
const primaryColor = Color(0xFFFF4E54);
const DAAppTextColorPrimary = Color(0xFF212121);
const appColorPrimary = Color(0xFF1157FA);
const iconColorPrimary = Color(0xFFFFFFFF);
const iconColorSecondary = Color(0xFFA8ABAD);
const appSecondaryBackgroundColor = Color(0xFF131d25);
const appTextColorPrimary = Color(0xFF212121);
const appTextColorSecondary = Color(0xFF5A5C5E);
const appShadowColor = Color(0x95E9EBF0);
const appColorPrimaryLight = Color(0xFFF9FAFF);
// Dark Theme Colors
const appBackgroundColorDark = Color(0xFF121212);
const cardBackgroundBlackDark = Color(0xFF1F1F1F);
const color_primary_black = Color(0xFF131d25);
const iconColorPrimaryDark = Color(0xFF212121);
const iconColorSecondaryDark = Color(0xFFA8ABAD);
const appShadowColorDark = Color(0x1A3E3942);
AppStore.dart
import '../utils/DAColors.dart';
import 'package:flutter/material.dart';
import 'package:mobx/mobx.dart';
import 'package:nb_utils/nb_utils.dart';
part 'AppStore.g.dart';
class AppStore = AppStoreBase with _$AppStore;
abstract class AppStoreBase with Store {
@observable
bool isDarkModeOn = false;
@observable
bool isHover = false;
@observable
Color? iconColor;
@observable
Color? backgroundColor;
@observable
Color? appBarColor;
@observable
Color? scaffoldBackground;
@observable
Color? backgroundSecondaryColor;
@observable
Color? appColorPrimaryLightColor;
@observable
Color? iconSecondaryColor;
@observable
Color? textPrimaryColor;
@observable
Color? textSecondaryColor;
@action
Future<void> toggleDarkMode({bool? value}) async {
isDarkModeOn = value ?? !isDarkModeOn;
if (isDarkModeOn) {
scaffoldBackground = appBackgroundColorDark;
appBarColor = cardBackgroundBlackDark;
backgroundColor = Colors.white;
backgroundSecondaryColor = Colors.white;
appColorPrimaryLightColor = cardBackgroundBlackDark;
iconColor = iconColorPrimary;
iconSecondaryColor = iconColorSecondary;
textPrimaryColor = whiteColor;
textSecondaryColor = Colors.white54;
textPrimaryColorGlobal = whiteColor;
textSecondaryColorGlobal = Colors.white54;
shadowColorGlobal = appShadowColorDark;
} else {
scaffoldBackground = scaffoldLightColor;
appBarColor = Colors.white;
backgroundColor = Colors.black;
backgroundSecondaryColor = appSecondaryBackgroundColor;
appColorPrimaryLightColor = appColorPrimaryLight;
iconColor = iconColorPrimaryDark;
iconSecondaryColor = iconColorSecondaryDark;
textPrimaryColor = appTextColorPrimary;
textSecondaryColor = appTextColorSecondary;
textPrimaryColorGlobal = appTextColorPrimary;
textSecondaryColorGlobal = appTextColorSecondary;
shadowColorGlobal = appShadowColor;
}
setStatusBarColor(scaffoldBackground!);
setValue('isDarkModeOnPref', isDarkModeOn);
}
@action
void toggleHover({bool value = false}) => isHover = value;
}
AppStore.g.dart
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'AppStore.dart';
// **************************************************************************
// StoreGenerator
// **************************************************************************
// ignore_for_file: non_constant_identifier_names, unnecessary_brace_in_string_interps, unnecessary_lambdas, prefer_expression_function_bodies, lines_longer_than_80_chars, avoid_as, avoid_annotating_with_dynamic
mixin _$AppStore on AppStoreBase, Store {
final _$isDarkModeOnAtom = Atom(name: 'AppStoreBase.isDarkModeOn');
@override
bool get isDarkModeOn {
_$isDarkModeOnAtom.reportRead();
return super.isDarkModeOn;
}
@override
set isDarkModeOn(bool value) {
_$isDarkModeOnAtom.reportWrite(value, super.isDarkModeOn, () {
super.isDarkModeOn = value;
});
}
final _$isHoverAtom = Atom(name: 'AppStoreBase.isHover');
@override
bool get isHover {
_$isHoverAtom.reportRead();
return super.isHover;
}
@override
set isHover(bool value) {
_$isHoverAtom.reportWrite(value, super.isHover, () {
super.isHover = value;
});
}
final _$iconColorAtom = Atom(name: 'AppStoreBase.iconColor');
@override
Color? get iconColor {
_$iconColorAtom.reportRead();
return super.iconColor;
}
@override
set iconColor(Color? value) {
_$iconColorAtom.reportWrite(value, super.iconColor, () {
super.iconColor = value;
});
}
final _$backgroundColorAtom = Atom(name: 'AppStoreBase.backgroundColor');
@override
Color? get backgroundColor {
_$backgroundColorAtom.reportRead();
return super.backgroundColor;
}
@override
set backgroundColor(Color? value) {
_$backgroundColorAtom.reportWrite(value, super.backgroundColor, () {
super.backgroundColor = value;
});
}
final _$appBarColorAtom = Atom(name: 'AppStoreBase.appBarColor');
@override
Color? get appBarColor {
_$appBarColorAtom.reportRead();
return super.appBarColor;
}
@override
set appBarColor(Color? value) {
_$appBarColorAtom.reportWrite(value, super.appBarColor, () {
super.appBarColor = value;
});
}
final _$scaffoldBackgroundAtom =
Atom(name: 'AppStoreBase.scaffoldBackground');
@override
Color? get scaffoldBackground {
_$scaffoldBackgroundAtom.reportRead();
return super.scaffoldBackground;
}
@override
set scaffoldBackground(Color? value) {
_$scaffoldBackgroundAtom.reportWrite(value, super.scaffoldBackground, () {
super.scaffoldBackground = value;
});
}
final _$backgroundSecondaryColorAtom =
Atom(name: 'AppStoreBase.backgroundSecondaryColor');
@override
Color? get backgroundSecondaryColor {
_$backgroundSecondaryColorAtom.reportRead();
return super.backgroundSecondaryColor;
}
@override
set backgroundSecondaryColor(Color? value) {
_$backgroundSecondaryColorAtom
.reportWrite(value, super.backgroundSecondaryColor, () {
super.backgroundSecondaryColor = value;
});
}
final _$appColorPrimaryLightColorAtom =
Atom(name: 'AppStoreBase.appColorPrimaryLightColor');
@override
Color? get appColorPrimaryLightColor {
_$appColorPrimaryLightColorAtom.reportRead();
return super.appColorPrimaryLightColor;
}
@override
set appColorPrimaryLightColor(Color? value) {
_$appColorPrimaryLightColorAtom
.reportWrite(value, super.appColorPrimaryLightColor, () {
super.appColorPrimaryLightColor = value;
});
}
final _$iconSecondaryColorAtom =
Atom(name: 'AppStoreBase.iconSecondaryColor');
@override
Color? get iconSecondaryColor {
_$iconSecondaryColorAtom.reportRead();
return super.iconSecondaryColor;
}
@override
set iconSecondaryColor(Color? value) {
_$iconSecondaryColorAtom.reportWrite(value, super.iconSecondaryColor, () {
super.iconSecondaryColor = value;
});
}
final _$textPrimaryColorAtom = Atom(name: 'AppStoreBase.textPrimaryColor');
@override
Color? get textPrimaryColor {
_$textPrimaryColorAtom.reportRead();
return super.textPrimaryColor;
}
@override
set textPrimaryColor(Color? value) {
_$textPrimaryColorAtom.reportWrite(value, super.textPrimaryColor, () {
super.textPrimaryColor = value;
});
}
final _$textSecondaryColorAtom =
Atom(name: 'AppStoreBase.textSecondaryColor');
@override
Color? get textSecondaryColor {
_$textSecondaryColorAtom.reportRead();
return super.textSecondaryColor;
}
@override
set textSecondaryColor(Color? value) {
_$textSecondaryColorAtom.reportWrite(value, super.textSecondaryColor, () {
super.textSecondaryColor = value;
});
}
final _$toggleDarkModeAsyncAction =
AsyncAction('AppStoreBase.toggleDarkMode');
@override
Future<void> toggleDarkMode({bool? value}) {
return _$toggleDarkModeAsyncAction
.run(() => super.toggleDarkMode(value: value));
}
final _$AppStoreBaseActionController = ActionController(name: 'AppStoreBase');
@override
void toggleHover({bool value = false}) {
final _$actionInfo = _$AppStoreBaseActionController.startAction(
name: 'AppStoreBase.toggleHover');
try {
return super.toggleHover(value: value);
} finally {
_$AppStoreBaseActionController.endAction(_$actionInfo);
}
}
@override
String toString() {
return '''
isDarkModeOn: ${isDarkModeOn},
isHover: ${isHover},
iconColor: ${iconColor},
backgroundColor: ${backgroundColor},
appBarColor: ${appBarColor},
scaffoldBackground: ${scaffoldBackground},
backgroundSecondaryColor: ${backgroundSecondaryColor},
appColorPrimaryLightColor: ${appColorPrimaryLightColor},
iconSecondaryColor: ${iconSecondaryColor},
textPrimaryColor: ${textPrimaryColor},
textSecondaryColor: ${textSecondaryColor}
''';
}
}
Comments
Post a Comment