My_Flutter_Learning_note

Battement

• introduction

quoi

• Cadre
• open source
• Application Multi-PlateForm à partir d'une base de code unique (Cross Pateform).

Pourquoi utiliser Flutter

Flutter transforme le processus de développement des applications. Créer, tester et déployer de belles applications mobiles, Web, de bureau et intégrées à partir d'une seule base de code.

qui se développe

• développé par Google.
• introduit en 2015.
• Sorti en 2017.

installation

Configuration de l'espoir

• Ouvrez la palette de commande. .

• Shift + CMD + P sur Mac OS.

• Shift + Ctrl + P sur Windows.

• Type Flutter nouveau projet

• Sélectionner le nouveau projet Flutter nouveau

• Sélectionner l'application

• Sélectionnez le chemin du projet où vous souhaitez mettre votre projet.

• Entrez le nom de votre projet

• Appuyez sur Entrée

Ooooo ... c'est fait

• Vous pouvez faire tout ce que vous voulez dans votre projet.
• Ici Mean Lib / Main.dart ## sous le dossier lib Main.dart est disponible.

First Flutter App

Copier la pâte à partir de la documentation officielle Suivez l'URL? https://codelabs.developers.google.com/codelabs/flutter-codelab-first#2

Ajout de bouton

Eleveatedbutton (on étouffé: () {
print ('bouton suivant appuyé sur "); }, enfant: text ('suivant'),),

main () ou fonction principale

Il ne fait que dire une application Flutter. qui est défini dans la fonction myFunction () ex. void main () {runApp (myFunction ()); }

Les widgets sont les éléments à partir desquels vous créez chaque application Flutter.

Comme vous pouvez le voir, même l'application elle-même est un widget.

Ex. 1.StatelessWidget 2.StatefulWidget

class myApp () {# le point de départ de votre application.

}

• MyAppstate # définit l'état de votre application

• MyAppstate # définit les données dont l'application doit fonctionner. À l'heure actuelle, il ne contient qu'une seule variable avec la paire de mots aléatoires - - - courante. Vous ajouterez à cela plus tard.

• Changenotificateur

• façon de gérer l'état d'applications dans Flutter. Les voies de maney puissantes sont également avanables.

• La classe d'État étend Changenotifier, ce qui signifie qu'elle peut informer les autres de ses propres changements.

• Chaque widget définit une méthode build () qui s'appelle automatiquement chaque fois que les circonstances du widget changent afin que le widget soit toujours à jour.

• MyHomePage suit les modifications de l'état actuel de l'application à l'aide de la méthode de montre.

• SCAFFALD (): # C'est un widget utile et se trouve dans la grande majorité des applications de flottement du monde réel.

• Column (): # est l'un des widgets de mise en page les plus élémentaires de Flutter.

• WordPair # fournit plusieurs getters utiles, tels que Aspascalcase ou AssnaKECase. Ici, nous utilisons AslowerCase

Formatage du code de flottement

https://docs.flumber.dev/development/tools/formatting

Le code de flottement implique souvent de construire des structures de données en forme d'arbres assez profondes, par exemple dans une méthode de construction. Pour obtenir un bon formatage automatique, nous vous recommandons d'adopter les virgules de fuite en option. La directive pour l'ajout d'une virgule arrière est simple: ajoutez toujours une virgule arrière à la fin d'une liste de paramètres dans les fonctions, les méthodes et les constructeurs où vous vous souciez de garder le formatage que vous avez fabriqué. Cela aide le formateur automatique à insérer une quantité appropriée de ruptures de ligne pour le code de style flottant.

• getNext ()
• Tout ce qui reste, c'est d'appeler la méthode GetNext à partir du rappel du bouton.
• Rendre l'application plus jolie
• Extraire un widget
• La ligne responsable de l'affichage de la paire de mots actuelle ressemble à ceci maintenant: texte (appstate.current.aslowercase). Pour le changer en quelque chose de plus complexe, c'est une bonne idée d'extraire cette ligne dans un widget séparé. Avoir des widgets séparés pour des parties logiques distinctes de votre interface utilisateur est un moyen important de gérer la complexité dans Flutter.

Ajouter une carte

refacteur

widget d'extraction

• Sélectionnez le texte Cliquez sur Refactor
• Cliquez sur le widget d'extraction
• Entrez le nom du widget
• Une classe sera créée comme vos noms entrés

rembourrage

• Sélectionner le texte
• clic droit
• Sélectionnez Refactor
• Sélectionnez envelopper avec un rembourrage
• Appuyez sur Entrée

// Remarque: Flutter utilise la composition sur l'héritage chaque fois qu'elle le peut. Ici, au lieu que le rembourrage soit un attribut de texte, c'est un widget!

// De cette façon, les widgets peuvent se concentrer sur leur responsabilité unique, et vous, le développeur, avez une liberté totale dans la façon de composer votre interface utilisateur. Par exemple, vous pouvez utiliser le widget Padding pour remplir du texte, des images, des boutons, vos propres widgets personnalisés ou l'application entière. Le widget ne se soucie pas de ce qu'il enveloppe.

Thème et style

Fonctionnalité

1. Sélectionnez un widget de mise en page.
2. Widget visible (texte, image, icônes).
3. Ajoutez le widget visible au widget de mise en page.
4. Applications matérielles.
5. Applications non matérielles.

Tâche accomplie

• créer une mise en page
• ajouter une image
• ajouter le titre
• Ajouter un sous-titre
• Ajouter des icônes de notation comme
• Ajouter l'icône d'appel
• Ajouter l'étiquette
• Ajouter l'icône de route
• Ajouter l'étiquette
• Ajouter l'icône de partage
• Ajouter l'étiquette
• Ajouter du texte (Discription)

Créer des applications réactives et adaptatives

• La classe LayoutBuilder 'construit un arbre de widget qui peut dépendre de la taille du widget parent.'

• Aspectratio («Un widget qui tente de dimensionner l'enfant à un rapport d'aspect spécifique»).

• CustomSingLechildLayout («Un widget qui remet la disposition de son enfant célibataire à un délégué.»)

• SinglechildLayoutdelegate, («qui contrôle la disposition de l'enfant.»)

• CustomultichildLayout («qui utilise un délégué pour positionner plusieurs enfants.»)

• FittedBox («Échelle et positionne son enfant en soi selon l'ajustement.»)

• Boîte fractionnée

• Disposition

• Médiasir

• MediaqueryData

• Orientation

Widgets de mise en page

Célibataire

• Aligner - aligne - un enfant en lui-même. Il faut une double valeur entre -1 et 1, pour l'alignement vertical et horizontal.

• Aspectratio tente de dimensionner l'enfant à un rapport d'aspect spécifique.

• Contrainmentbox impose des contraintes de taille à son enfant, offrant un contrôle sur la taille minimale ou maximale.

• CustomSingLechildLayout - utilise une fonction déléguée pour positionner un seul enfant. Le délégué peut déterminer les contraintes de mise en page et le positionnement pour l'enfant.

• Expansé et flexible - permet à un enfant d'une ligne ou d'une colonne de rétrécir ou de croître pour remplir tout espace disponible.

• Fractionly Sizedbox - tale son enfant à une fraction de l'espace disponible.

• LayoutBuilder - construit un widget qui peut se refléter en fonction de la taille de ses parents.

• SingleChildscrollView - ajoute un défilement à un seul enfant. Souvent utilisé avec une ligne ou une colonne.

Multichild

• Colonne, rangée et flexion - expose les enfants dans une seule course horizontale ou verticale. La colonne et la ligne étendent le widget Flex.

• CustomultichildLayout - utilise une fonction déléguée pour positionner plusieurs enfants pendant la phase de mise en page.

• Écoulement - similaire à CustomultichildLayout, mais plus efficace car il est effectué pendant la phase de peinture plutôt que la phase de disposition.

• ListView, GridView et CustomScrollView - Fournit des listes de décre des enfants.

• Stack - Payers et positionne plusieurs enfants par rapport aux bords de la pile. Fonctionne de manière similaire à la position fixée dans CSS.

• Tableau - utilise un algorithme de disposition de table classique pour ses enfants, combinant plusieurs lignes et colonnes.

• Enveloppez - affiche ses enfants dans plusieurs courses horizontales ou verticales.

• Animation 'Le premier élément constitutif du système d'animation est la classe d'animation. Une animation représente une valeur d'un type spécifique qui peut changer au cours de la durée de vie de l'animation. La plupart des widgets qui effectuent une animation reçoivent un objet d'animation en tant que paramètre, à partir de laquelle ils lisent la valeur actuelle de l'animation et à laquelle ils écoutent des modifications à cette valeur.

• AddListener 'Chaque fois que la valeur de l'animation change, l'animation informe tous les auditeurs ajoutés avec AddListener. En règle générale, un objet d'état qui écoute une animation appelle SetState sur lui-même dans son rappel d'auditeur pour informer le système de widgets qu'il doit reconstruire avec la nouvelle valeur de l'animation. '

• AnimatedWidget, «est le plus utile pour les widgets animés sans état»

• AnimatedBuilder, «est utile pour des widgets plus complexes qui souhaitent inclure une animation dans le cadre d'une fonction de construction plus grande».

• AddStatusListener 'Animations fournit également un animationstatus, ce qui indique comment l'animation évoluera au fil du temps. '

• AnimationController ''