Why Flutter?

Alors, lorsque vous envisagez de construire un nouveau projet, pourquoi choisir Flutter ? Qu'est-ce que ça peut faire? Eh bien, l'une des premières raisons que vous pourriez envisager est que vous vous retrouverez avec une base de code à maintenir, un endroit pour déboguer et un endroit pour mettre à jour. Alors, une base de code pour les gouverner tous ? Et c'est un énorme avantage par rapport à la création native de vos applications, par exemple, la création de vos applications iOS dans Swift et la création de vos applications Android en Java et de vos applications Web en JavaScript et d'avoir tous ces différents endroits que vous devez mettre à jour et maintenir. Et cela peut devenir vraiment salissant. Alors qu'ici, vous n'avez besoin de connaître qu'une seule langue - c'est Dart, qui est une langue puissante avec laquelle il est en fait assez facile de travailler. Une fois que vous avez appris et compris comment l'utiliser, vous pouvez l'utiliser pour créer vos applications iOS, vos applications Android, vos applications Web. Et cela signifie que vous n'avez qu'à devenir bon dans une chose au lieu de beaucoup de choses différentes. Et si vous avez déjà fait de la programmation, vous vous rendrez compte que Dart est en fait très, très similaire à de nombreux langages de programmation orientés objet modernes. Il a beaucoup de fonctionnalités que d'autres langages puissants auront. Et il a été utilisé en interne chez Google pour créer des outils puissants tels que Google AdWords et Google Fiber. Et son utilisation ne fera que s'accroître. Actuellement, nous pouvons déjà utiliser Flutter et Dart pour créer des applications mobiles iOS et Android, mais ses applications vont au-delà. Vous pourrez bientôt utiliser Hummingbird pour créer des applications Web écrivant du code Dart et même l'utiliser pour créer des applications qui s'exécutent sur votre bureau. Non seulement c'est l'avantage de maintenir et de mettre à jour une base de code, mais Flutter vous permet d'utiliser un système de mise en page très simple et flexible pour créer de belles interfaces utilisateur pour tout projet dans lequel vous vous lancez. Et c'est l'une des plus grandes difficultés auxquelles les développeurs d'applications modernes doivent faire face, car vous vous souvenez peut-être lorsque l'iPhone 3G a été lancé pour la première fois, il n'y avait qu'une seule taille d'écran et un seul rapport hauteur/largeur. C'était un 3. Écran de 5 pouces. Et c'est fou de penser que cela ne coûtait que 99 $. Et maintenant, cela coûte quelque chose comme un milliard de dollars. Mais il existe toute une famille d'appareils. Il y a les iPad Pros, les iPads, les iPad Airs, les iPhones et tous ses petits cousins et oncles et tantes et voisins et... et c'est juste un énorme écosystème de différentes tailles d'écran, différents formats d'image. Et en tant que développeur, vous devez faire face à tout cela et essayer de faire en sorte que votre application soit belle sur chacun de ces écrans. Et cela devient encore pire lorsque vous commencez à penser à Android en raison du fait qu'Android est open-source, cela signifie donc que quiconque veut construire un smartphone peut utiliser Android comme système d'exploitation. Si vous créez une application Android, elle peut être exécutée sur n'importe quel million de types d'appareils avec à nouveau des tailles d'écran différentes et des rapports d'aspect différents. Et vous pouvez voir que même en août 2014, il y avait tout simplement trop d'appareils différents qui exécutaient Android, même pour que vous puissiez en garder une trace. Donc, en tant que développeur, si nous voulons mettre en page notre écran pour tirer le meilleur parti de l'espace de l'écran et nous assurer que l'utilisateur a réellement une bonne expérience d'utilisation de notre application. Afin de faire cela à la fois sur iOS et Android, nous utilisons maintenant des contraintes. Et les contraintes deviennent essentiellement plus complexes à mesure que le nombre d'éléments augmente à l'écran. Ainsi, les contraintes peuvent être très faciles à faire et à bien faire si vous n'avez que quatre ou cinq choses à l'écran. Mais nous ne sommes plus en 3. L'ère de l'écran de 5 pouces n'est plus. Et quand nous avions un petit écran, il n'y avait pas grand-chose que vous puissiez faire tenir sur cet écran. Et c'est à ce moment-là qu'il était logique d'utiliser des contraintes : peu d'éléments, peu de complexité. Mais nos écrans sont devenus de plus en plus gros. Je suis à peu près sûr que le prochain téléphone n'aura aucune lunette et qu'il aura la taille de mon visage. Mais, cela signifie également que vous pouvez alimenter beaucoup plus de choses sur cet écran. Il y a donc plus d'éléments, ce qui signifie que contraindre chacun d'eux les uns par rapport aux autres devient plus complexe. Et plus il y a de complexité - dans tout - signifie que c'est plus difficile à comprendre. Et il est plus difficile de faire du bon travail en créant de belles interfaces utilisateur offrant une bonne expérience utilisateur. Alors d'où Flutter puise-t-il son inspiration ? Eh bien, une grande partie vient du Web. Parce que c'est un endroit où ils ont dû s'adapter à différentes tailles, parce que les gens créent des sites Web sur mobile, sur iPad, sur tablette, sur de grands écrans de bureau. Donc, beaucoup de choses qui ont évolué dans l'écosystème Web ont été vraiment très efficaces pour gérer la mise en page sur différentes tailles d'écran. Et grâce à l'utilisation d'éléments tels que des grilles, des colonnes ou des bootstrap. nous avons développé des manières vraiment simples et élégantes de présenter l'interface utilisateur sur un site Web. Alors pourquoi ne pouvons-nous pas faire la même chose sur mobile ? Et il y a beaucoup de concepts de base de la conception Web qui entrent dans le développement de Flutter. Et cela vous permet d'utiliser des lignes. Par exemple, empiler des éléments les uns à côté des autres horizontalement. Ou colonnes - éléments qui doivent s'empiler verticalement sur l'écran. Ou des piles - des choses qui doivent s'empiler les unes sur les autres. Et puis en leur donnant du rembourrage ou en leur donnant des marges ou en les centrant. Et avoir tout un tas de ces widgets pratiques qui facilitent la disposition de votre écran. Maintenant, comme s'il ne suffisait pas d'avoir une base de code unique avec laquelle travailler et une manière intuitive et belle de présenter l'interface utilisateur de votre application, il y a aussi quelque chose appelé Hot Reload. Lorsque nous développons des applications, l'une des plus grandes difficultés est lorsque vous devez exécuter l'application car souvent sur iOS, cela peut prendre entre 10 et 30 secondes entre l'enregistrement de votre code, l'exécution de votre application, sa compilation et enfin sa visualisation À l'écran. Mais lorsque vous travaillez dans Flutter, dès que vous mettez à jour votre code et que vous cliquez sur "Enregistrer", votre interface utilisateur changera parfois sous vos yeux en une fraction de seconde parfois. Et cela conduit à une manière très différente de concevoir l'interface utilisateur. C'est presque comme si vous aviez un bouton d'actualisation sur un site Web. Dès que vous modifiez quelque chose, vous appuyez sur Enregistrer et vous voyez les changements dans votre application. Et puis vous itérez. Et vous finissez par vous affiner sur la conception finale que vous souhaitez car vous avez accès au rechargement ultra-rapide. Et cela rend vraiment amusant et vraiment facile de concevoir de belles interfaces. Et vous pouvez le voir en action ici. Chaque fois que j'appuie sur Enregistrer, vous pouvez le voir ici, vous avez le "Préparation du rechargement à chaud ... " et instantanément les mises à jour de l'interface utilisateur. J'ai donc changé la couleur. J'appuie sur enregistrer. L'interface utilisateur est mise à jour. Et cela est enregistré en temps réel. Il n'y a pas d'accélération. Aucune modification n'est effectuée ici. C'est juste aussi rapide. Et cela en fait une expérience vraiment amusante pour concevoir une belle interface utilisateur. Maintenant, la dernière chose dont je veux parler est le fait que lorsque vous travaillez avec Flutter, vous avez accès au code source d'origine. Parce que Flutter est open source, cela signifie que si vous voulez voir comment un bouton est implémenté, vous pouvez simplement cliquer dessus et vous verrez comment ils ont écrit le code pour qu'il ressemble à ce qu'il est ; comment se comporter comme il est ; et vous pouvez cliquer sur n'importe quoi sur l'écran et vous pouvez voir le code original que l'équipe a écrit pour qu'il soit tel qu'il est. Et cela signifie que vous pouvez plus facilement comprendre comment ces widgets fonctionnent. Si vous avez travaillé sur le développement iOS, vous saurez qu'il s'agit en grande partie d'une mystérieuse boîte noire. Parce que sur iOS, de nombreux composants sont propriétaires. La façon dont Apple implémente un bouton ou un curseur est essentiellement leur sauce secrète. Et vous n'y avez pas accès. Mais sur Flutter, vous le faites. Et cela signifie que vous serez là pour voir comment quelque chose, en particulier, est mis en œuvre. Et si vous vouliez le personnaliser ; si vous vouliez créer entièrement votre propre version, vous pouvez simplement copier ce qu'ils ont fait pour leur version et mettre à jour les pièces dont vous avez besoin. Disons donc que je ne veux plus utiliser le bouton d'action flottant standard de Flutter. Je veux créer ma propre version. Eh bien, si nous allons de l'avant et l'examinons, nous pouvons voir qu'il est construit avec cette élévation de l'écran et une hauteur et une largeur de cette taille. Et puis on peut voir qu'une fois qu'il est assemblé, il est basé sur quelque chose qui s'appelle un bouton de matière première. Je vais donc entrer ici et je vais supprimer leur version du bouton d'action flottant. Et je vais juste construire mon propre bouton de matière première. Et mon bouton va être personnalisé comme je le souhaite. Je veux donc qu'il ait une couleur qui soit peut-être rouge au lieu de bleu. Cela changera donc les couleurs en rouge. Et quand j'appuie sur "Enregistrer", vous pouvez voir qu'il effectue un rechargement à chaud et nous nous retrouvons avec un rectangle rouge. Maintenant, je ne veux pas vraiment que ce soit un rectangle. J'aime toujours beaucoup les bords arrondis. Alors changeons sa forme. Changeons-le en un rectangle rond. Et je vais rendre ses coins un peu plus arrondis. Je vais donc changer le rayon de bordure pour peut-être disons 50 pixels. Et maintenant, quand j'appuie sur Enregistrer, vous pouvez voir que c'est beaucoup plus rond. Cela ressemble beaucoup plus à la forme de pilule que je cherchais. Ensuite, personnalisons-le un peu plus. Je voulais être un peu plus grand pour le moment. C'est vraiment, vraiment petit. Faisons-le un peu plus haut et un peu plus large. Ajoutons donc quelques contraintes de boîte. Et je vais changer la hauteur à, disons, 50 pixels. Et nous ferons la largeur peut-être 100. Donc, maintenant, quand j'appuie sur "Enregistrer", j'ai le bouton parfait. Et c'est exactement celui que je veux. Et j'ai réussi à le personnaliser exactement à mon goût en regardant exactement comment l'équipe Flutter a créé le bouton d'action flottant. Et je l'ai juste changé pour en faire ma propre version. Il y a donc beaucoup de choses vraiment excitantes que vous pouvez faire avec Flutter. Et dans les leçons à venir, nous allons explorer et approfondir toutes les choses intéressantes que vous pouvez faire avec Flutter et Dart.