I added night mode to my app. I set the theme colors for the bottomnavigationbar and other areas for the mod. Mode switching works fine, but when I close and open the application, the background becomes black and the navbar returns to its old color. These problems do not occur when running on the emulator.
Theme color class:
ThemeData light = ThemeData(brightness: Brightness.light);
ThemeData lightTheme = light.copyWith(
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: Colors.white70,
appBarTheme: AppBarTheme(color: kPrimaryColor, elevation: 2),
visualDensity: VisualDensity.adaptivePlatformDensity,
iconTheme: IconThemeData(color: kContentColorLightTheme),
colorScheme: ColorScheme.light(
primary: kPrimaryColor,
secondary: kSecondaryColor,
error: kErrorColor,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: kContentColorLightTheme1,
selectedItemColor: kPrimaryColor,
unselectedItemColor: kContentColorLightTheme.withOpacity(0.32),
selectedIconTheme: IconThemeData(color: kPrimaryColor),
showUnselectedLabels: true,
),
);
ThemeData dark = ThemeData(brightness: Brightness.dark);
ThemeData darkTheme = dark.copyWith(
scaffoldBackgroundColor: kContentColorDarkTheme,
visualDensity: VisualDensity.adaptivePlatformDensity,
appBarTheme: AppBarTheme(color: kDarkColor, elevation: 2),
iconTheme: IconThemeData(color: kContentColorLightTheme),
colorScheme: ColorScheme.dark().copyWith(
primary: kPrimaryColor,
secondary: kSecondaryColor,
error: kErrorColor,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: kDarkColor,
selectedItemColor: Colors.white70,
unselectedItemColor: kContentColorDarkTheme.withOpacity(0.32),
selectedIconTheme: IconThemeData(color: Colors.white),
unselectedIconTheme: IconThemeData(color: Colors.grey),
showUnselectedLabels: true,
),
);
class ThemeColorData with ChangeNotifier {
static SharedPreferences? _sharedPreferences;
bool _isLight = true;
bool get isLight => _isLight;
ThemeData get themeColor => _isLight ? lightTheme : darkTheme;
void switchTheme(bool value) {
_isLight = value;
saveTheme(value);
notifyListeners();
}
Color get colorBackground => _isLight ? Colors.white : kDarkColor;
Future<void> createSharedPrefObject() async {
_sharedPreferences = await SharedPreferences.getInstance();
}
void saveTheme(bool value) async {
_sharedPreferences!.setBool('themeData', value);
}
void loadTheme() async {
await createSharedPrefObject();
_isLight = _sharedPreferences!.getBool('themeData') ?? true;
}
}
Use:
SwitchListTile(
activeColor: kPrimaryColor,
title:
_themeColorData ? Text('Açık Tema') : Text('Koyu Tema'),
value: Provider.of<ThemeColorData>(context).isLight,
onChanged: (bool value) {
Provider.of<ThemeColorData>(context, listen: false)
.switchTheme(value);
},
),
Bottom Navigation Bar:
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(),
BottomNavigationBarItem(),
BottomNavigationBarItem()
],
currentIndex: _selectedIndex,
unselectedItemColor: Colors.grey.shade500,
onTap: _onItemTapped,
)
Main class:
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await ThemeColorData().createSharedPrefObject();
runApp(ChangeNotifierProvider<ThemeColorData>(
create: (BuildContext context) => ThemeColorData(), child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Provider.of<ThemeColorData>(context, listen: false).loadTheme();
ThemeData themeColor = Provider.of<ThemeColorData>(context).themeColor;
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: themeColor,
home: SplashScreen(),
);
}
}
Incorrect Screen Code: When I use it here, when I start the application in night mode, the screen is painted black and the texts remain at the bottom.
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
bool _isLight = Provider.of<ThemeColorData>(context).isLight;
return SafeArea(
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(),
];
},
body: Container(
width: size.width,
height: size.height,
decoration: BoxDecoration(
color: _isLight ? Colors.white : kContentColorDarkTheme,
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 7),
Align(),
SizedBox(height: 10),
SelectableText(
widget.dataModel.title,
style: Theme.of(context).textTheme.headline6!.copyWith(
fontFamily: 'Muli', fontWeight: FontWeight.w600),
),
SizedBox(height: 10),
SelectableText(
widget.dataModel.longDescription,
style: TextStyle(
height: 1.3,
fontSize: 18,
fontFamily: 'Muli',
fontWeight: FontWeight.w300),
),
SizedBox(height: 10.0),
],
),
),
),
),
),
),
);
}