Cambiare tema dinamicamente in Flutter

In questo articolo vediamo come cambiare tema dinamicamente in Flutter.

In pratica useremo uno Switch per passare dalla versione light a quella dark e viceversa.

Inoltre salveremo l'ultima scelta dell'utente.

Ci serviranno due librerie di cui abbiamo già parlato in passato:

flutter pub add provider shared_preferences

Installate librerie cominciamo con il creare una classe che si occupa delle SharedPreferences:

import 'package:shared_preferences/shared_preferences.dart';

class ThemePrefs {
  static const THEME = "theme";

  setTheme(bool value) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    sharedPreferences.setBool(THEME, value);
  }

  getTheme() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    return sharedPreferences.getBool(THEME) ?? false;
  }
}

Adesso create una classe che ci pemette di intercettare il cambiamento di valore dello Switch, e che poi setta/prende la preferenza:

import 'package:flutter/cupertino.dart';
import 'package:test_flutter/ThemePrefs.dart';

class ThemeProvider extends ChangeNotifier {
  late bool _isDark;
  late ThemePrefs _preferences;

  bool get isDark => _isDark;

  ThemeProvider() {
    _isDark = false;
    _preferences = ThemePrefs();
    getPreferences();
  }

  set isDark(bool value) {
    _isDark = value;
    _preferences.setTheme(value);
    notifyListeners();
  }

  getPreferences() async {
    _isDark = await _preferences.getTheme();
    notifyListeners();
  }
}

Infine la nostra schermata:

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

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: Consumer<ThemeProvider>(
        builder: (context, ThemeProvider themeprovider, child) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: themeprovider.isDark
                ? ThemeData.dark().copyWith(
                    colorScheme:
                        ColorScheme.fromSeed(seedColor: Colors.deepPurple),
                    useMaterial3: true,
                  )
                : ThemeData.light().copyWith(
                    colorScheme:
                        ColorScheme.fromSeed(seedColor: Colors.deepOrange),
                    useMaterial3: true,
                  ),
            debugShowCheckedModeBanner: false,
            home: const MyHomePage(title: 'Flutter test'),
          );
        },
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isDark = false;

  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, ThemeProvider themeprovider, child) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Switch(
                  value: isDark,
                  onChanged: (val) {
                    setState(() {
                      isDark = !isDark;
                    });

                    themeprovider.isDark
                        ? themeprovider.isDark = false
                        : themeprovider.isDark = true;
                  },
                ),
                Text(
                  'CIAO',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

Enjoy!