woopear_package_dart
construction des themes
- creer un fichier
themes.dart
à l'intérieur - ajouter le code ci-dessous dans le fichier
themes.dart
// proprieter pour theme claire
final themeClair = WooTheme.modeClair();
// proprieter pour theme dark
final themeDark = WooTheme.modeDark();
ajout de proprieter
si les proprietés sont dite principal (voir partir propsPrincipal)
vous devez les renseigner directement dans les fonctions
fournis ci-dessus, sinon creer des fichiers séparer et creer les class
de themeData des widget ciblé.
- ajouter proprieter principal
// proprieter pour theme claire
final themeClair = WooTheme.modeClair(
// props principal
primary: Colors.red // ici votre couleur custom
);
- ajouter une proprieter de themeData
- creer un fichier du themeData du widget ciblé
ex:app_bar_themedata.dart
- puis creer votre variable contenant le themedata
// fichier => app_bar_themedata.dart
import 'package:flutter/material.dart';
final appBarTheme = AppBarTheme(
backgroundColor: Colors.red,
elevation: 5.0,
),
- ensuite affecter votre variable à la fonction dans le fichier
themes.dart
// fichier => themes.dart
import 'package:nomdeprojet/theme_data/app_bar_themedata.dart';
// proprieter pour theme claire
final themeClair = WooTheme.modeClair(
// props principal
primary: Colors.red, // ici votre couleur custom
appBarTheme: appBarTheme, // votre themeData d'un widget
);
instancier les providers
ce package fournis un provider prêt à l'emploi
ainsi qu'un bouton switch basique que l'on détail ci-dessous il faut cependant l'instancier dans votre projet
et il vous faudra le ManagerState flutter_riverpod
pour l'exemple je vais utiliseProviderScope
du package
l'écriture me semble plus clean
vous pouvez bien sur utiliser la méthode que vous voulez.
- ajout du
ProviderScope
du package flutter_riverpod
void main() async {
const ProviderScope(child: App());
}
oui c'est simpel ;-)
fonction changeTheme()
- ajouter la fonction à votre bouton switch
// implementation
void changeTheme(bool value) {
themeMode = value ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
// exemple d'utilisation
Widget build(BuildContext context) {
return Switch.adaptive(
value: ref.watch(wooThemeChange).isDarkMode,
onChanged: (value) =>
ref.watch(wooThemeChange).changeTheme(!value),);
}
passez en argument la valeur de votre bouton switch
et la fonction modifiera le theme pour vous.
dans l'exemple j'utilise ref.watch qui permet d'utiliser
la fonction. encore une fois vous pouvez faire autrement
wooThemeChange
est le provider creer parriverpod
- utilisation du bouton switch fournis par le package
/// fournisser les icons que vous souhaitez utiliser
child: WooThemeSwitch(
iconTrue: Icon(Icons.votreicon), /// si le mode dark est activer (true)
iconFalse: Icon(Icons.votreicon), /// si le mode dark est désactivé (false)
)
le bouton utilise en interne la fonction
changeTheme
et utilise le providerwooThemeChange
ajout des themes à votre application
une fois tous mis en place
ajoutons nos themes à l'application
tous ce passe dans leMaterialApp()
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appName,
// utilisation du context pour recuperer
// le themeMode qui ce charge de modifier votre theme
// via votre bouton switch ou du theme du systeme
themeMode: ref.watch(themeState).themeMode,
// nom de votre variable dans le fichier themes.dart
theme: themeClair,
// nom de votre variable dans le fichier themes.dart
darkTheme: themeDark,
home: const Test(),
);