Optimer din tid som en flutter-udvikler med live-skabeloner

Foto af Nhu Nguyen på Unsplash

Når vi begynder at udvikle vores apps på et nyt sprog og ny teknologi, sætter vi ære i hvert tastetryk, vi laver. Vi lærer, vi vil vide, hvordan tingene fungerer, så vi skriver utallige gange den samme ting igen og igen. Men efter det 100. StatefulWidget, begynder vi at spekulere på, om der er en bedre og hurtigere måde at oprette både widgetten og dens tilstand.

Og her er hvor Live-skabeloner kommer for at redde vores liv.

StatefulWidget Live-skabelon

En Live Template er dybest set en skabelon, som vi kan bruge til forskellige opgaver, f.eks. Til loops, oprette Widgets, variabel deklarationer og fælles klassedeklarationer. Faktisk er nogle af disse allerede i IntelliJ, som iter til at itere på en liste over objekter.

For at teste det ud, inden for en funktion, vi skriver iter, skal du klikke på enter og begynde at skrive i hver variabel. For at navigere til den næste variabel klikker vi på fanebjælken.

iter Live Template i aktion

Ved at gå til Android Studio-indstillinger (CMD +, på Mac og Control + Alt + S på Windows) og søge efter Live-skabeloner kan vi se en liste over alle de tilgængelige skabeloner til hvert sprog eller teknologi.

For at starte med et simpelt eksempel åbner vi Dart live-skabeloner og søger efter iter.

iter Live Template-præferencer

Som vi kan se, har vi:

  • En forkortelse, der skal bruges til at "kalde" skabelonen, i dette tilfælde er det iter
  • En beskrivelse for at vise brugeren, hvad denne Live Template vil gøre
  • Et kodestykke
  • En knap kaldet "Rediger variabler"
  • Diverse muligheder.

For tiden vil vi fokusere på kodestykket til dette eksempel:

I dette kodestykket har vi en for hver løkke lavet i pil med 3 variabler. Hver variabel er inde i to $ -symboler, med deres navn med store bogstaver, og vi kan se, at en af ​​dem kaldes $ END $, som er en variabel til at indstille stedet for markøren, når brugeren er færdig med at bruge Live Template.

Oprettelse af en live skabelon til StatefulWidgets

Så hvordan kan vi lave en live skabelon?

Med et eksempel på StatefulWidget (lad os glemme, at Flutter allerede har en Live Template til det med nøgleordene stful) foreslår jeg, at vi starter med at oprette den manuelt.

Navnet LiveWidget findes både i klassedeklarationen og inde i _LiveWidgetState-navnet, så vi nemt kan oplyse, at LiveWidget er en variabel. Da vores variabler skal være inden for to $, kan vi navngive dem $ CLASS_NAME $.

Vi skal derefter ændre alle steder, hvor klassens navn vises:

  • Klassenavnet StatefulWidget
  • CreateState-returtypen
  • Statens klassens navn
  • Staten udvidede type

Lad os åbne præferencerne for Live Template igen, så vi kan tilføje det der:

Oprettelse af en ny Live-skabelon

I den nyoprettede skabelon skal vi udfylde hvert felt:

  • For forkortelsen har jeg valgt statewidget
  • En lille beskrivelse af skabelonen kan være Oprettelse af en tilstandfuld widget
  • Endelig skal vi indsætte vores kodestykker
Fejlen

Vi kan dog se en fejlmeddelelse i bunden af ​​skærmen: “Ingen relevante kontekster endnu”. Hvis vi klikker på definere, bliver vi bedt om en liste over sprog med underkategorierne Statement, Top-level og Other.

Tilgængelige kontekster til Dart

Da vi ønsker at afgive en klassedeklaration, ønsker vi, at vores Live Template kun er tilgængelig på øverste niveau, og derfor vælger vi denne mulighed.

Og det er det! Vi kan nu klikke på Anvend og begynde at teste vores live skabelon!

Vi opretter en ny fil, test skabelonen ved at skrive i forkortelsen, udfyld klassens navn og…!

StatefulWidget udefinerede klassefejl

Vi fik udefinerede klassefejl.

For at løse dette skal vi redigere vores Live Template for også at importere fra fladder / materiale, i tilfælde af at vi bruger Material Widgets.

Og nu fungerer alt sammen i orden!

Det næste trin ville være at fjerne null-return fra buildmethod og indsætte variablen $ END $, som vi så med iter-eksemplet, så vi kan begynde at skrive widgetkoden direkte:

Avanceret brug: Oprettelse af en skabelon til build_value klasser

For et mere komplekst eksempel, lad os se på build_value klasser.

For at serialisere og deserialisere vores klasser med build_value, er vi nødt til at oprette en kedelplade-kode:

Det er dog ikke ligetil at oprette denne Live Template:

  • Vi har filnavnet i del 'data_class.g.dart';
  • Når vi erklærer serienummereren, er vi nødt til at erklære den som _ $ dataClassSerializer, og som vi kan se, kammerer den DataClass for at oprette dataClass

Er der en måde at løse dette på?

Hvis vi ser på vores tidligere eksempel, i vinduet Live Template-indstillinger, har vi en knap kaldet Edit Variables med flere tilgængelige indstillinger

StatefulWidget Live-skabelonvariabler
  • Navn - navnet på den variabel, vi oprettede. Hver gang vi opretter en ny variabel, oprettes en række automatisk her med dens navn
  • Ekspression - et sæt udtryk, der kan anvendes på vores variabel, såsom camelCase, dato, bruger og filNameWithoutExtension
  • Standardværdi - en værdi, der er indstillet som standard, men som kan redigeres af brugeren bagefter. Den interessante del her er, at vi kan referere til andre variabler her
  • Spring over, hvis defineret - Hvis værdien allerede er defineret af en standardværdi, kan vi springe den over.

Hvordan kan dette hjælpe os?

Først skal vi erklære en ny variabel for en del kaldet $ FILE_NAME $. Som standardværdi er vi nødt til at bruge ekspressionsfilenNameWithoutExtension, og da vi ikke ønsker, at denne variabel skal redigeres af brugeren, markerer vi afkrydsningsfeltet Spring om nødvendigt.

Derefter erklæres variablen $ CLASS_NAME $ i din kode, så den automatisk vises i variabelvinduet. Dette bruges til at oprette vores sidste variabel, $ STATIC_CLASS_NAME $. Denne variabel bruger en standardværdi, der vil kombinere Expression camelCase og variablen CLASS_NAME: camelCase (CLASS_NAME). Som med den første variabel redigerer brugeren ikke denne variabel, så vi markerer afkrydsningsfeltet Spring om nødvendigt.

Som en sidebemærkning, da build_value bruger et variabelt navn med tegnet $, skal det erklæres som $$, så for STATIC_CLASS_NAME erklærer vi _ $$$ STATIC_CLASS_NAME $ Serializer.

Vi ender med følgende live-skabelon:

build_value-variabler

Og så kan vi teste det:

build_value Live Template i aktion

Opsummering og fremtidige muligheder

Vi afsluttede vores lavvandede dykke i Live Template! 🥳

Men hvilke andre anvendelser har vi til det?

Prøv at se på din codebase og se, hvilken kedelplade du har brug for at skrive og skrive igen. Jeg giver dig nogle flere eksempler fra mine projekter:

  • Deklarering af RxDart-emner og den nødvendige synke og / eller strøm
  • Variabler brugt i intern oversættelsespakke
  • Oprettelse af en blok ved at udvide en BaseBloc med den nødvendige konstruktør
  • Oprettelse af kortklasser

Jeg er nysgerrig, hvad skal du bruge den til?