This code is responsible for switching from a light theme to a dark one. The last line of code is responsible for the options for switching from dark to light theme: a white button and a sliding yellow color.
Tell me how can I achieve that on a light background this button is black and slides with yellow accompaniment.
I will also be grateful if you tell me how to make the width of this button the same as the top two.
class ChangeThemeButtonWidget extends StatelessWidget {
const ChangeThemeButtonWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final themeProvider = Provider.of<ThemeProvider>(context);
return Switch.adaptive(
value: themeProvider.isDarkMode,
onChanged: (value) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setBool('isDarkMode', value);
final provider = Provider.of<ThemeProvider>(context, listen: false);
provider.toggleTheme(value);
},
activeColor: themeProvider.isDarkMode ? Colors.white : Colors.yellow,
);
}
}
CodePudding user response:
I think the issue is that you are expecting both the left position and the right position to be active state.
But a switch works in a way that the left position is the inactive
position and the right is the active
position.
You need to set the inactiveThumbColor
as black for light mode.
activeColor: themeProvider.isDarkMode ? Colors.white : Colors.yellow,
inactiveThumbColor: themeProvider.isDarkMode ? Colors.yellow : Colors.black,