From 29ac96d4fd451c1d2b444e7e9129559f5d5ec65d Mon Sep 17 00:00:00 2001 From: CodeWithAnn Date: Sun, 20 Oct 2024 02:57:39 +0530 Subject: [PATCH] added toggle button to toggle b/w light and dark theme --- lib/cubit/theme_toggle/theme_cubit.dart | 19 +++++ lib/cubit/theme_toggle/value_cubit.dart | 9 +++ lib/main.dart | 51 +++++++----- lib/views/common_widgets/toggle_button.dart | 77 +++++++++++++++++++ lib/views/pages/profile/profile_screen.dart | 67 +++++++++------- macos/Flutter/GeneratedPluginRegistrant.swift | 2 + pubspec.lock | 12 ++- pubspec.yaml | 1 + 8 files changed, 191 insertions(+), 47 deletions(-) create mode 100644 lib/cubit/theme_toggle/theme_cubit.dart create mode 100644 lib/cubit/theme_toggle/value_cubit.dart create mode 100644 lib/views/common_widgets/toggle_button.dart diff --git a/lib/cubit/theme_toggle/theme_cubit.dart b/lib/cubit/theme_toggle/theme_cubit.dart new file mode 100644 index 0000000..bdb8a86 --- /dev/null +++ b/lib/cubit/theme_toggle/theme_cubit.dart @@ -0,0 +1,19 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; + +class ThemeCubit extends Cubit { + ThemeCubit() : super(ThemeMode.system); + + // void initialTheme() { + // emit(ThemeMode.system); + // } + + void switchTheme(bool currentValue) { + if (currentValue) { + emit(ThemeMode.dark); + } else { + emit(ThemeMode.light); + } + // emit(ThemeMode.system); + } +} diff --git a/lib/cubit/theme_toggle/value_cubit.dart b/lib/cubit/theme_toggle/value_cubit.dart new file mode 100644 index 0000000..23efa07 --- /dev/null +++ b/lib/cubit/theme_toggle/value_cubit.dart @@ -0,0 +1,9 @@ +import 'package:flutter_bloc/flutter_bloc.dart'; + +class ValueCubit extends Cubit { + ValueCubit() : super(false); + + void changeValue(bool value) { + emit(value); + } +} diff --git a/lib/main.dart b/lib/main.dart index 3dd1c52..3a2aaa3 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,6 +2,8 @@ import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:donorconnect/cubit/auth/auth_cubit.dart'; import 'package:donorconnect/cubit/locate_blood_banks/locate_blood_banks_cubit.dart'; import 'package:donorconnect/cubit/profile/profile_cubit.dart'; +import 'package:donorconnect/cubit/theme_toggle/theme_cubit.dart'; +import 'package:donorconnect/cubit/theme_toggle/value_cubit.dart'; import 'package:donorconnect/firebase_options.dart'; import 'package:donorconnect/language/cubit/language_cubit.dart'; import 'package:donorconnect/language/helper/language.dart'; @@ -59,25 +61,38 @@ class MyApp extends StatelessWidget { BlocProvider( create: (context) => LanguageCubit()..initilize(), ), + BlocProvider( + create: (context) => ThemeCubit(), + ), + BlocProvider( + create: (context) => ValueCubit(), + ), ], - child: BlocBuilder( - builder: (context, languageState) { - return MaterialApp( - localizationsDelegates: AppLocalizations.localizationsDelegates, - supportedLocales: AppLocalizations.supportedLocales, - locale: Locale(languageState.languageCode), - debugShowCheckedModeBanner: false, - // Main route selection - home: (token != null && !JwtDecoder.isExpired(token!)) - ? HomePage(token: token!) - : const FrontPage(), - // You can add routes for the verification form - routes: { - '/verification': (context) => - const VerificationForm(), // Add route for verification form - }, - ); - }), + child: BlocBuilder( + builder: (context, themeState) { + return BlocBuilder( + builder: (context, languageState) { + return MaterialApp( + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + locale: Locale(languageState.languageCode), + //theme + themeMode: themeState, + darkTheme: ThemeData.dark(), + debugShowCheckedModeBanner: false, + // Main route selection + home: (token != null && !JwtDecoder.isExpired(token!)) + ? HomePage(token: token!) + : const FrontPage(), + // You can add routes for the verification form + routes: { + '/verification': (context) => + const VerificationForm(), // Add route for verification form + }, + ); + }); + }, + ), ); } } diff --git a/lib/views/common_widgets/toggle_button.dart b/lib/views/common_widgets/toggle_button.dart new file mode 100644 index 0000000..e805627 --- /dev/null +++ b/lib/views/common_widgets/toggle_button.dart @@ -0,0 +1,77 @@ +import 'package:animated_toggle_switch/animated_toggle_switch.dart'; +import 'package:donorconnect/cubit/theme_toggle/theme_cubit.dart'; +import 'package:donorconnect/cubit/theme_toggle/value_cubit.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; + +class ThemeToggleButton extends StatelessWidget { + const ThemeToggleButton({super.key, required this.switchValue}); + final bool switchValue; + + @override + Widget build(BuildContext context) { + return BlocBuilder( + builder: (context, Themestate) { + // final x =0; + return Padding( + padding: const EdgeInsets.only(left: 8.0, right: 8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const Text( + "Change App Theme", + style: TextStyle(fontSize: 20), + ), + SizedBox( + height: 42, + width: 140, + child: AnimatedToggleSwitch.dual( + current: switchValue, + // values: [false, true], + first: false, + second: true, + height: 40, + onChanged: (value) { + context.read().changeValue(value); + // + context.read().switchTheme(value); + }, + styleBuilder: (value) => ToggleStyle( + indicatorColor: + value ? Colors.purple.shade300 : Colors.yellow, + backgroundGradient: value + ? const LinearGradient( + colors: [Colors.purpleAccent, Colors.deepPurple]) + : LinearGradient(colors: [ + Colors.yellow.shade300, + Colors.yellow.shade900 + ]), + ), + iconBuilder: (value) => value + ? const Icon( + Icons.nights_stay_rounded, + color: Colors.white, + ) + : const Icon( + Icons.sunny, + color: Colors.black, + ), + textBuilder: (value) => value + ? const Center( + child: Text( + "Dark Mode", + style: TextStyle(color: Colors.white), + ), + ) + : const Center( + child: Text("Light Mode"), + ), + ), + ) + ], + ), + ); + }, + ); + } +} diff --git a/lib/views/pages/profile/profile_screen.dart b/lib/views/pages/profile/profile_screen.dart index 00d7705..dd93559 100644 --- a/lib/views/pages/profile/profile_screen.dart +++ b/lib/views/pages/profile/profile_screen.dart @@ -1,7 +1,9 @@ import 'package:donorconnect/cubit/auth/auth_cubit.dart'; import 'package:donorconnect/cubit/profile/profile_cubit.dart'; import 'package:donorconnect/cubit/profile/profile_state.dart'; +import 'package:donorconnect/cubit/theme_toggle/value_cubit.dart'; import 'package:donorconnect/language/helper/language_extention.dart'; +import 'package:donorconnect/views/common_widgets/toggle_button.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -77,11 +79,11 @@ class _ProfileScreenState extends State { // Medical History TextFormField( initialValue: state.medicalHistory, - decoration: - InputDecoration( - border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(9))), - labelText: _text.medical_history, - ), + decoration: InputDecoration( + border: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(9))), + labelText: _text.medical_history, + ), onChanged: (value) => context .read() .updateMedicalHistory(value), @@ -91,25 +93,26 @@ class _ProfileScreenState extends State { // Current Medications TextFormField( initialValue: state.currentMedications, - decoration: - InputDecoration( - border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(9))), - labelText: _text.current_medications, - ), + decoration: InputDecoration( + border: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(9))), + labelText: _text.current_medications, + ), onChanged: (value) => context .read() .updateCurrentMedications(value), ), - + const SizedBox(height: 16), // Allergies TextFormField( initialValue: state.allergies, decoration: InputDecoration( - border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(9))), + border: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(9))), labelText: _text.allergies, - ), + ), onChanged: (value) => context.read().updateAllergies(value), ), @@ -132,9 +135,10 @@ class _ProfileScreenState extends State { context.read().updateBloodType(value ?? ''); }, decoration: InputDecoration( - border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(9))), + border: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(9))), labelText: _text.blood_type, - ), + ), ), const SizedBox(height: 16), @@ -169,17 +173,27 @@ class _ProfileScreenState extends State { context.read().toggleNotifications(value); }, ), + const SizedBox(height: 16), + // theme-toggle button + BlocBuilder( + builder: (context, currentValuestate) { + final switchValue = currentValuestate; + // print("Current Value of switch:::$switchValue"); + return ThemeToggleButton( + switchValue: switchValue, + ); + }, + ), const SizedBox(height: 24), - // Save Button ElevatedButton( - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(30), - ), - backgroundColor: Theme.of(context).colorScheme.primary, - padding: const EdgeInsets.fromLTRB(112, 10, 140, 15), - ), + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(30), + ), + backgroundColor: Theme.of(context).colorScheme.primary, + padding: const EdgeInsets.fromLTRB(112, 10, 140, 15), + ), onPressed: () async { if (_formKey.currentState!.validate()) { // Save the profile using userId @@ -194,11 +208,10 @@ class _ProfileScreenState extends State { child: Text( _text.save_profile, style: TextStyle( - color: Theme.of(context).colorScheme.onPrimary, - fontWeight: FontWeight.bold, - ), + color: Theme.of(context).colorScheme.onPrimary, + fontWeight: FontWeight.bold, + ), ), - ), ], ), diff --git a/macos/Flutter/GeneratedPluginRegistrant.swift b/macos/Flutter/GeneratedPluginRegistrant.swift index 9c4bf7e..c1b3fa0 100644 --- a/macos/Flutter/GeneratedPluginRegistrant.swift +++ b/macos/Flutter/GeneratedPluginRegistrant.swift @@ -11,6 +11,7 @@ import firebase_auth import firebase_core import firebase_storage import geolocator_apple +import google_sign_in_ios import path_provider_foundation import shared_preferences_foundation import url_launcher_macos @@ -22,6 +23,7 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { FLTFirebaseCorePlugin.register(with: registry.registrar(forPlugin: "FLTFirebaseCorePlugin")) FLTFirebaseStoragePlugin.register(with: registry.registrar(forPlugin: "FLTFirebaseStoragePlugin")) GeolocatorPlugin.register(with: registry.registrar(forPlugin: "GeolocatorPlugin")) + FLTGoogleSignInPlugin.register(with: registry.registrar(forPlugin: "FLTGoogleSignInPlugin")) PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin")) SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin")) UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin")) diff --git a/pubspec.lock b/pubspec.lock index 8193d1d..55e987b 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -30,6 +30,14 @@ packages: url: "https://pub.dev" source: hosted version: "6.7.0" + animated_toggle_switch: + dependency: "direct main" + description: + name: animated_toggle_switch + sha256: "786e82be3b004100299c1c6d023f8f1928decc8353a6fdff191bf78c866262fa" + url: "https://pub.dev" + source: hosted + version: "0.8.3" ansicolor: dependency: transitive description: @@ -1323,10 +1331,10 @@ packages: dependency: transitive description: name: vm_service - sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d" + sha256: f652077d0bdf60abe4c1f6377448e8655008eef28f128bc023f7b5e8dfeb48fc url: "https://pub.dev" source: hosted - version: "14.2.5" + version: "14.2.4" vy_string_utils: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 3ed8bca..8a722b1 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -51,6 +51,7 @@ dependencies: url_launcher: ^6.3.1 table_calendar: ^3.1.2 google_sign_in: ^6.2.1 + animated_toggle_switch: ^0.8.3 dev_dependencies: