Video

Dessiner autour du notch des smartphones Android 👨‍💻 Tutoriel Flutter / Android

Name: Dessiner autour du notch des smartphones Android 👨💻 Tutoriel Flutter / Android
Uploaded: 2022-09-22
Channel: Edouard Marquez

by Edouard Marquez youtube.com September 22, 2022

11 min 541 views

Watch on YouTube

Il existe sur Android des APIs pour connaître la forme et la position du notch des téléphones. Dans cette vidéo, nous allons voir comment l’exploiter. Pour cela, nous verrons le code à écrire sur Android, puis celui en Flutter. Par simplicité, deux algorithmes seront mis en place : si c’est un carré = un cercle, puis un notch façon iPhone. Si toutefois aucun notch n’est présent (ou que les APIs n’existent pas), une progression sera affichée dans la status bar. ⚠️ N’hésitez pas à liker la vidéo pour que d’autres personnes puissent la découvrir. 💙 Si vous n’êtes pas encore abonnés, n’hésitez pas à le faire activer la cloche 🛎 avec toutes les notifications activées ! 🗓 Au programme de cette vidéo : 00:00 Introduction 00:34 Simuler un notch sur un émulateur ou un téléphone Android (display cutout) 01:13 L’objectif de ce tutoriel : progression dans une liste 01:38 Implémentation Flutter du remplissage de la status bar 02:41 Les APIs Android pour obtenir les informations sur le notch 03:40 API Flutter/Dart ↔️ Android 04:17 L’implémentation côté Android 05:54 L’implémentation côté Flutter 06:27 L’implémentation avec un cercle (= caméra) 06:49 La version avec un notch façon iPhon 07:40 Bug avec la combinaison des Paths 08:06 Combiner deux Paths 08:15 Dessiner une portion d’un Path 09:27 Un rappel sur la manière d’obtenir l’effet 09:50 Accès au code 10:14 D’autres idées autour du notch 10:44 A bientôt - pensez à liker :) 👉 Liens utiles 1ère partie du tuto (Pigeon) https://www.youtube.com/watch?v=bZWJTx-rCpU Documentation Android sur les notch https://source.android.com/docs/core/display/display-cutouts Article de Cyril Mottier https://cyrilmottier.com/2018/05/31/fun-with-cutouts/ API Android sur le notch (cutout) https://developer.android.com/reference/android/view/DisplayCutout#getBoundingRects() Bibliothèque PathWay https://github.com/romainguy/pathway Lien vers le code https://github.com/g123k/devcafe_demo_notch Retrouvez des tutoriaux Flutter et Android sur la chaîne DevCafé : https://youtube.flutter.paris/ Retrouvez-moi aussi avec mes deux newsletters : - Flutter Digest 💙 : https://flutter-digest.com/ - Android Croissants 🥐 : https://android-croissants.com/

Made by