toggle

lib/main.dart

@@ -20,12 +20,13 @@ void main() async {
 class MainWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
+    //Wrapping MaterialApp with Consumer makes the ThemeProvider available throughout the app.
     return Consumer<ThemeProvider>(builder: (context, themeProvider, child) {
       return MaterialApp(
         title: 'Flutter Theme',
         home: HomeScreen(),
         theme: themeProvider.getTheme,
-        routes: {},
+        debugShowCheckedModeBanner: false,
       );
     });
   }

lib/models/ThemeNotifier.dart

@@ -21,7 +21,7 @@ class ThemeProvider extends ChangeNotifier {
       _selectedTheme = darkTheme;
       await prefs.setBool("isDark", true);
     }
-
+//notifying all the listeners(consumers) about the change.
     notifyListeners();
   }
 }

lib/screens/Home.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:light_dark_theme_flutter/models/ThemeNotifier.dart';
+import 'package:light_dark_theme_flutter/themes/Themes.dart';
 import 'package:provider/provider.dart';
 
 class HomeScreen extends StatefulWidget {
@@ -12,20 +13,29 @@ class HomeScreen extends StatefulWidget {
 class _HomeScreenState extends State<HomeScreen> {
   @override
   Widget build(BuildContext context) {
+    ThemeProvider themeProvider =
+        Provider.of<ThemeProvider>(context, listen: false);
+
     return Scaffold(
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Text("Hello World!"),
-            IconButton(
-              onPressed: () {
-                ThemeProvider themeProvider =
-                    Provider.of<ThemeProvider>(context, listen: false);
-                themeProvider.changeTheme();
-              },
-              icon: Icon(Icons.brightness_4_outlined),
+            Container(
+              child: Image.asset(themeProvider.getTheme == darkTheme
+                  ? 'assets/moon.png'
+                  : 'assets/sun.png'),
+              width: MediaQuery.of(context).size.width * 0.8,
+              height: MediaQuery.of(context).size.height * 0.2,
             ),
+            Switch(
+                value: themeProvider.getTheme == darkTheme,
+                activeColor: themeProvider.getTheme == darkTheme
+                    ? Colors.white
+                    : Colors.black,
+                onChanged: (d) {
+                  themeProvider.changeTheme();
+                })
           ],
         ),
       ),

pubspec.yaml

@@ -47,9 +47,9 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/sun.png
+    - assets/moon.png
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.