En Flutter, la gestion de thème est une technique puissante qui vous permet de personnaliser l’apparence visuelle de votre application afin d’offrir une expérience utilisateur cohérente et attrayante. Une approche courante de la gestion de thème consiste à mettre en œuvre des thèmes clairs et sombres, permettant aux utilisateurs de passer d’un schéma de couleurs à un autre en fonction de leurs préférences ou de l’environnement dans lequel ils se trouvent.
En incorporant des thèmes clairs et sombres avec des couleurs personnalisées dans le développement de votre application Flutter, vous pouvez créer des interfaces visuellement attrayantes qui s’adaptent de manière transparente à différentes conditions d’éclairage. Ce guide explore comment mettre en œuvre des thèmes clairs et sombres dans Flutter et montre comment personnaliser la palette de couleurs pour qu’elle corresponde à l’image de marque de votre application ou à vos exigences en matière de design. Plongeons dans le monde de la gestion de thème en Flutter et découvrons comment donner rapidement un aspect vibrant et dynamique à votre application.
Qu’est-ce que la gestion de thème en Flutter ?
Le thème est l’élément de style générique qui représentera l’ensemble du style, de l’apparence et de la convivialité de votre application. Chaque fois que vous souhaitez modifier le thème de l’application Flutter, par exemple, passer du mode sombre de Flutter au mode clair de Flutter ou vice-versa, ce processus s’appelle la gestion de thème de Flutter.
Cependant, en implémentant le mode Sombre/Clair dans les projets, ils utiliseront le thème d’application par défaut et leur attribut de couleurs par défaut. Mais dans le projet réel, vous devez inclure la couleur personnalisée pour l’image de marque de l’application.
Thème de Flutter avec couleurs personnalisées : Guide étape par étape
Pour une intégration réussie de la gestion de thème avec Flutter, vous devez prendre soin des points suivants :
- Créer un projet Flutter
- Ajouter le paquet Riverpod au fichier yaml.
Étape 1 : Créer un thème clair/sombre
Utilisez la classe ThemeData et personnalisez les couleurs et les diverses propriétés en fonction de vos besoins. Nous avons créé une méthode pour obtenir les ThemeData en fonction des thèmes optés (light ou dark).
En fonction du thème sélectionné, nous fournissons plusieurs valeurs pour scaffoldBackgroundColor, thumbColor, appBarTheme, listTileTheme et bodyColor.
ThemeData getAppTheme(BuildContext context, bool isDarkTheme) {
return ThemeData(
scaffoldBackgroundColor: isDarkTheme ? Colors.black : Colors.white,
textTheme: Theme.of(context)
.textTheme
.copyWith(
titleSmall:
Theme.of(context).textTheme.titleSmall?.copyWith(fontSize: 11),)
.apply(
bodyColor: isDarkTheme ? Colors.white : Colors.black,
displayColor: Colors.grey,
),
switchTheme: SwitchThemeData(
thumbColor: MaterialStateProperty.all(
isDarkTheme ? Colors.orange : Colors.purple),
),
listTileTheme: ListTileThemeData(
iconColor: isDarkTheme ? Colors.orange : Colors.purple),
appBarTheme: AppBarTheme(
backgroundColor: isDarkTheme ? Colors.black : Colors.white,
iconTheme: IconThemeData(color: isDarkTheme ? Colors.white : Colors.black54)),
);
}Étape 2 : Créer un provider pour l’état du thème avec Riverpod
River-pod sera utilisé pour contrôler l’état du thème de l’application. Nous utiliserons StateProvider pour enregistrer une valeur bool afin de contrôler les thèmes clairs ou foncés.
final appThemeProvider = StateProvider<bool>((ref) => false);Étape 3 : Utiliser le thème dans l’application
Puisque le river-pod est utilisé dans le projet, MyApp doit être enveloppé dans ProviderScope afin d’accéder à tous les providers dans l’application. MyApp implémente ConsumerWidget, ce qui nous permet d’obtenir l’objet WidgetRef dans la méthode build et d’utiliser la variable ref pour accéder à n’importe quel river-pod. La méthode getAppTheme(context, ref.watch(appThemeProvider)), qui surveille les modifications apportées au thème de l’application, met à jour l’application si nécessaire.
class MyApp extends ConsumerWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
return MaterialApp(
title: 'Flutter Light/Dark Theme',
debugShowCheckedModeBanner: false,
theme: getAppTheme(context, ref.watch(appThemeProvider)),
home: const MyHomePage(),
);
}
}ref.read(appThemeProvider.notifier).value = state. Lorsque l’état du switch passe de l’état clair au sombre, nous mettons à jour l’état du thème dans appThemeProvider.
Switch(
activeColor: Colors.orange,
onChanged: (value) {
ref.read(appThemeProvider.notifier).state = value;
},
value: isDarkMode
)Étape 4 : Ajouter une couleur personnalisée
Il fonctionne correctement tant que toutes les icônes et le texte utilisent la même couleur. Nous devons développer une extension pour le thème afin d’utiliser d’autres couleurs pour les icônes. Créez une classe, étendez-la avec ThemeExtension et ajoutez les champs requis pour la personnalisation.
class AppColors extends ThemeExtension<appcolors> {
final Color? color1;
final Color? color2;
final Color? color3;
const AppColors({required this.color1, required this.color2, required this.color3,});
@override
AppColors copyWith({Color? color1, Color? color2, Color? color3}) {
return AppColors(
color1: color1 ?? this.color1,
color2: color2 ?? this.color2,
color3: color3 ?? this.color3,
);
}
@override
AppColors lerp(ThemeExtension<appcolors>? other, double t) {
if (other is! AppColors) {
return this;
}
return AppColors(
color1: Color.lerp(color1, other.color1, t),
color2: Color.lerp(color2, other.color2, t),
color3: Color.lerp(color3, other.color3, t),
);
}
}Le thème peut maintenant être défini en fonction des couleurs en ajoutant cet attribut d’extension à ThemeData dans notre méthode de création getAppTheme.
