Background

Flutter Ways to Make a Dark/Light Mode Toggle

entry image

// main.dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { // Using "static" so that we can easily access it later static final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.light); const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return ValueListenableBuilder<ThemeMode>( valueListenable: themeNotifier, builder: (_, ThemeMode currentMode, __) { return MaterialApp( // Remove the debug banner debugShowCheckedModeBanner: false, title: 'Kindacode.com', theme: ThemeData(primarySwatch: Colors.amber), darkTheme: ThemeData.dark(), themeMode: currentMode, home: const HomeScreen(), ); }); } } // Home Screen class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Kindacode.com'), actions: [ IconButton( icon: Icon(MyApp.themeNotifier.value == ThemeMode.light ? Icons.dark_mode : Icons.light_mode), onPressed: () { MyApp.themeNotifier.value = MyApp.themeNotifier.value == ThemeMode.light ? ThemeMode.dark : ThemeMode.light; }) ], ), body: Center( child: ElevatedButton( child: const Text('Go to Other Screen'), onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (context) => const OtherScreen())); }, ), ), ); } } // Other Screen class OtherScreen extends StatelessWidget { const OtherScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Other Screen'), ), body: const Center( child: Text( 'Hello', style: TextStyle(fontSize: 50), ), ), ); } }