🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / FLUTTER / Tema Değiştirme DarkMode light Mode lightMode 2024 provider ve shared preferences ile kaldığı yerden temayı yükleme thema

1-) FLUTTER - Tema Değiştirme DarkMode light Mode lightMode 2024 provider ve shared preferences ile kaldığı yerden temayı yükleme thema

 

***yüklenilcek kütüphaneler***

 

flutter pub add provider

flutter pub add shared_preferences

 

1. Main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'BottomNavigationPage.dart';
import 'ThemePreference.dart';

void main() {
  runApp(
const MyApp());
}

class ThemeProvider extends ChangeNotifier {
  
final ThemePreference themePreference = ThemePreference();

  
bool _isDarkMode;

  
ThemeProvider(this._isDarkMode);

  
bool get isDarkMode => _isDarkMode;

  
void toggleTheme() {
    
_isDarkMode = !_isDarkMode;
    
themePreference.setDarkTheme(_isDarkMode); // Tema tercihini güncelle
    
notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  
const MyApp({super.key});

  
// This widget is the root of your application.
  
@override
  
Widget build(BuildContext context) {
    
return FutureBuilder<bool>(
      future:
ThemePreference().getDarkTheme(),
      builder: (context, snapshot) {
        
if (snapshot.connectionState == ConnectionState.waiting) {
          
return CircularProgressIndicator(); // Tercihler yüklenirken bekleme göster
        
} else {
          
bool isDarkMode = snapshot.data!;
          
return ChangeNotifierProvider(
            create: (context) =>
ThemeProvider(isDarkMode),
            child:
Consumer<ThemeProvider>(
              builder: (context, themeProvider, child) {
                
return MaterialApp(
                  title:
'NurBey Kuyumculuk',
                  debugShowCheckedModeBanner:
false,
                  theme: themeProvider.
isDarkMode ? ThemeData.dark() : ThemeData.light(),
                  home:
BottomNavigationPage(),
                );
              },
            ),
          );
        }
      },
    );
  }
}

 

 

 

 

 

 

 

 

2. ThemePreference.dart

import 'package:shared_preferences/shared_preferences.dart';

class ThemePreference {
  
static const String key = 'theme_preference';

  
Future<void> setDarkTheme(bool value) async {
    
SharedPreferences prefs = await SharedPreferences.getInstance();
    
prefs.setBool(key, value);
  }

  
Future<bool> getDarkTheme() async {
    
SharedPreferences prefs = await SharedPreferences.getInstance();
    
return prefs.getBool(key) ?? true; // Varsayılan olarak karanlık temayı kullan
  
}
}

 

 

 

3. ThemeSwitchButton.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'main.dart';

class ThemeSwitchButton extends StatelessWidget {
  
@override
  
Widget build(BuildContext context) {
    
return Consumer<ThemeProvider>(
      builder: (context, themeProvider, child) {
        
return IconButton(
          icon:
Icon(
            themeProvider.
isDarkMode ? Icons.light_mode : Icons.dark_mode,
            color:
Colors.white,
          ),
          onPressed: () {
            themeProvider.toggleTheme();
          },
        );
      },
    );
  }
}

 

 

 

4. KULLANIMI

appBar: AppBar(
  actions: [
    
ThemeSwitchButton(),
  ],
),

 

 

 

5. FARKLI KULLANIMI

@override
Widget build(BuildContext context) {
  
ThemeProvider themeProvider = Provider.of<ThemeProvider>(context);

 

Container(
  color:   themeProvider.
isDarkMode ? Colors.black : Colors.white,

 

 

 

6. veya FARKLI KULLANIMI

 

bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

 

 

 2023 Ağustos 27 Pazar
 227