Annonce de la prise en charge de Codepen pour Flutter: comment cela fonctionne-t-il pour les développeurs?


À quoi s’attendre lorsque le terrain de jeu de développement frontal rencontre le meilleur cadre de développement d’applications?

Si vous êtes un codeur ou un développeur, vous auriez déjà rencontré des problèmes inspirants. CodePen a été pour les développeurs ou les concepteurs ce qu’est Dribble. Lorsque les développeurs manquent d’idées de fonctionnalités, ils accèdent à CodePen. Mais, lorsque CodePen a annoncé la prise en charge de Flutter, les choses sont devenues intéressantes!

Selon AppBrain, les applications basées sur Flutter représentent 0,52% des nouvelles applications développées aujourd’hui. Il détient également une part de marché globale de 0,24%. Il est très populaire en tant que cadre d’interface utilisateur. Avec un support officiel pour le CodePen, ce sera un excellent cadre pour les développeurs.

Mais, avant de découvrir comment la fusion de ces deux géants du développement peut fonctionner pour vous, apprenons-en plus.

Qu’est-ce que CodePen?

C’est un plate-forme sociale pour frontend les développeurs. Il s’agit d’une plateforme open source. Ici, les utilisateurs peuvent télécharger leurs extraits de code CSS, Javascript et HTML personnalisés. Ils peuvent tester et partager ces extraits. Ces extraits ou stylos sont partageables dans un environnement ouvert. Il a une version gratuite et une version professionnelle payante pour les équipes de développement frontend.

Les plumes ou les extraits sont synchronisés avec les modifications apportées par les développeurs en temps réel. Ainsi, les développeurs peuvent visualiser les modifications qu’ils apportent. Les développeurs peuvent même changer de stylo public.

Ils peuvent parcourir ces extraits à travers une énorme collection sur place. C’est une excellente plate-forme pour les concepteurs et les développeurs pour explorer de nouvelles idées de codage. Ils peuvent même apprendre de nouvelles formes d’extraits.

Qu’est-ce que Flutter?

Flutter est un cadre de développement incroyable. C’est un framework avec la base du langage de programmation Dart. Le langage Dart a une base Javascript. Ainsi, CodePen reste un partenaire idéal pour Flutter. Parce que CodePen permet aux développeurs / concepteurs de tester et de partager des extraits de code Javascript,

Il aide les développeurs à visualiser leur interface utilisateur via des arborescences de widgets. Les composants de l’interface utilisateur se présentent sous la forme de widgets. Tout changement dans le widget est effectivement intégré à l’application. Ainsi, tout développeur peut facilement créer des widgets pour modifier les fonctionnalités.

Il a un support étendu pour le frontend à travers le backend sonore. C’est un cadre idéal grâce à Firebase. Firebase est un Backend as a Service (BaaS). Donc, choisir services de développement d’applications flutter car votre projet n’est pas une mauvaise idée! Et la combinaison de CodePen avec Flutter peut s’avérer utile. Découvrons comment?

Éditeur Flutter dans Codepen:

Flutter a perturbé les marchés du développement d’applications. Depuis sa création, il s’est associé à Adobe et SuperNova par le biais Événements interactifs Flutter. Mais un partenariat avec CodePen sera une prouesse plus créative. Désormais, les développeurs peuvent accéder aux environnements Flutter basés sur CodePen. Cela peut signifier une énorme différence. Comme cela les aidera à visualiser la conception et à présenter de nouvelles fonctionnalités.

L’éditeur Flutter de CodePen est construit à la même échelle que celui d’un DartPad. Les services backend offerts par Dart à DartPad sont excellents. Et il utilise les mêmes services backend. Flutter a introduit DartPad à des fins similaires à celles de CodePen.

Avec DartPad, les développeurs peuvent apprendre, coder, tester et partager des extraits. Il s’agit d’un éditeur open source. Ainsi, l’idée d’échange d’extraits de code devient facile. Flutter voulait que DartPad soit l’outil idéal pour des plateformes comme CodePen.

L’éditeur Flutter de CodePen fonctionne mieux pour l’inspiration de conception. L’éditeur vous permettra d’utiliser la plateforme de CodePen pour expérimenter de nouvelles idées. Ces idées peuvent booster les designs et inspirer. tandis que vous pouvez utiliser DartPad pour tester rapidement les idées de code et créer de meilleures fonctionnalités techniques.

Comme nous l’avons compris, qu’est-ce qu’un éditeur Flutter et un DartPad? Comprenons le guide étape par étape pour utiliser l’éditeur dans CodePen.

Utilisation de Flutter Editor: étape 1

Vous devrez peut-être vous inscrire ou si un membre existant se connecte à votre compte CodePen. Une fois connecté, vous pouvez commencer à créez votre stylo Flutter ou un extrait de zéro. Vous pouvez modifier le format, visualiser l’extrait de code et même les tester dans Flutter.

Éditeur Flutter dans Codepen

Une autre façon de créer un stylo Flutter consiste à modifier un modèle. Le CodePen étant une communauté open source, il y a des millions de stylos à modifier. Vous pouvez choisir n’importe qui et les modifier. Vous pouvez les modifier pour votre usage. Vous pouvez même le visualiser comme une compilation et les tester dans des environnements Flutter.

Éditeur Flutter dans Codepen

Prenons un exemple du modèle ci-dessus. Ici, vous pouvez modifier les couleurs et le design via une modification du code. Par exemple, si vous changez la couleur du cercle indicateur de page de «Blanc» à «Violet» dans la ligne de code 326, vous pouvez voir les effets en temps réel. Vous pouvez même changer la couleur de la bordure de ces indicateurs de page dans la ligne de code 328.

Éditeur Flutter dans Codepen

Compilateur et analyseur: étape 2

L’éditeur est livré avec un compilateur et un analyseur intégrés. Si vous voulez voir tous les extraits dans une vue compilée, alors vous devez taper sur le menu et sélectionner “Afficher CompiledJS”. Une fois que vous avez sélectionné l’option, elle affichera automatiquement une compilation de tout le code.

Code compilé

Maintenant, si vous souhaitez analyser votre Flutter Pen à la recherche d’erreurs, accédez au menu → Sélectionnez «Analyser Flutter». Une fois que vous avez sélectionné l’option pour l’analyseur, le système analyse les extraits de code. Une fois l’analyse terminée, elle affiche un message indiquant qu’il n’y a pas d’erreur.

Analyse de code

S’il y a une erreur, l’éditeur l’indique avec une barre rouge. Vous pouvez donc apporter les modifications nécessaires.

Conclusion

Flutter était déjà un cadre sympa pour les développeurs. Et maintenant, c’est devenu plus excitant. Les développeurs peuvent profiter de l’expérimentation des animations Flutter, des conceptions et de la création de widgets. Mais, d’un point de vue commercial, Flutter est désormais plus puissant que jamais.

N’hésitez pas à partager avec nous dans la section commentaire ci-dessous!

Close Menu