Themes et ressources dans vos apps Flutter

Dart févr. 15, 2021

Nos apps mobiles utilisent des ressources en plus du code en Dart : images, textes affichés, couleurs, fichiers de configuration, etc. Flutter propose de nombreux outils pour faciliter la gestion de ces ressources et aussi leur traduction en plusieurs langues.

Vous allez donc découvrir comment gérer ces ressources et leur utilisation dans nos apps iPhone et Android en Dart.

Theme, ThemeData et Mode sombre :

La première notion abordée dans ce chapitre concerne la gestion des thème dans nos apps Flutter. Nous verrons comment définir un thème principal pour votre application puis faire référence à ce thème depuis l'ensemble de vos Widgets.

Vous coderez beaucoup moins et obtiendrez une expérience utilisateur cohérente de la première à la dernière page de vos apps.

Vous découvrerez aussi les classe Color, MaterialColor et ThemeData pour styler vos widgets et vos textes.

Nous verrons ensuite comment adapter ce thème et les objets ThemeData au mode sombre disponible sur iOS comme sur Android (aussi appelé Dark mode ou thème sombre).

D'ailleurs voici un extrait de ce chapitre, qui couvre le mode sombre :

Ressources externes et fichiers de configuration

Pour ceux qui veulent aller plus loin, je vous montrerai comment charger des ressources locales et des fichiers dans vos apps en Dart avec Flutter. J'ai même créé un fichier tout prêt en Dart que vous pourrez utiliser tel quel dans vos projets pour vous faciliter la vie 😁

Traduire les textes, gérer les pluriels et les genres en Dart

Avoir une app internationale est un atout indéniable pour obtenir plus d'utilisateurs dans vos apps iPhone et Android. Nous verrons comment

  • externaliser les textes de vos apps en dehors des fichiers sources
  • utiliser le plugin VSCode Flutter Intl pour automatiser les tâches de traduction
  • fournir des variantes pour chaque langue que vous voulez gérer
  • fournir des variantes pour chaque pluriel et même pour des genres et catégories si vous le souhaitez 🤩

Comment accéder à ce chapitre ?

Débutants en Dart/Flutter :

Si vous découvrez à peine le monde de la programmation avec Flutter, je vous conseille plutôt de commencer par mon cours de 1H pour découvrir les bases cet outil génial :

1H pour créer votre première app Flutter
Configurez votre ordinateur et créez votre premier projet d’app multiplateforme (iOS, Android, Web)

Si vous connaissez déjà le Dart et Flutter :

Si vous savez déjà programmer en Dart et que vous voulez maîtriser Flutter, voici le cours dédié dans lequel j'ajoute régulièrement des chapitres (comme je l'ai fait pour les ressources) :

Créer des apps et des sites web avec Flutter
Apprenez à réutiliser votre code pour tous les types d’appareils (iPhone, Android, Site web, Windows 10, macOS, etc.)

Dans tous les cas, je suis certain que vous allez adorer créer vos propres apps mobiles 💪

Happy coding!

Maxime

Mots clés