Flutter za Jetpack Compose developere: Potpuni praktični vodič

Početna » Piton » Flutter za Jetpack Compose developere: Potpuni praktični vodič

Ako se već osjećate kao kod kuće pišući korisnička sučelja s Jetpack Composeom i pitate se koliko je teško prijeći na Flutter, u odličnoj ste poziciji. Oba alata su deklarativna, reaktivna i izradio ih je Google, tako da se veliki dio vašeg mentalnog modela prenosi gotovo jedan na jedan. Glavne razlike leže u jeziku (Kotlin vs. Dart), strukturi projekta i načinu na koji svaki okvir komunicira s temeljnim slojevima Androida (a u slučaju Fluttera, iOS-a, weba i računala).

Ovaj vodič je napisan posebno za Jetpack Compose developere koji žele detaljno razumjeti Flutter, bez marketinških nepotrebnih elemenata. Vidjet ćete kako se ključni koncepti preslikavaju između dva svijeta: composables vs widgets, modifikatori vs konstruktor parametri, Lazy layouts vs ListView/GridView, Canvas vs CustomPainter, Navigation Compose vs Navigator, remember vs StatefulWidget i još mnogo toga. Također ćemo povezati vaše šire Android znanje (Views, životni ciklus, resursi, namjere, pozadinski rad) s njihovim Flutter ekvivalentima tako da se krivulja učenja više osjeća kao bočni korak nego uspon.

Od Jetpack Composea do Fluttera: gdje se vaše vještine prenose

Flutter je Googleov UI okvir za izradu višeplatformskih aplikacija pomoću Dart jezika, dok je Jetpack Compose Googleov moderni UI alat za izvorni Android pomoću Kotlina. Ispod haube ciljaju na različita okruženja za izvođenje, ali arhitektonski dijele istu veliku ideju: opisati korisničko sučelje kao funkciju stanja, pustiti okvir da shvati kada i kako ponovno crtati.

U Jetpack Composeu razmišljate u smislu kompozibilnih funkcija, modifikatora i rekompozicije; u Flutteru razmišljate u smislu widgeta, parametara konstruktora i ponovnih izgradnja. Unatoč različitom imenovanju, ponašanje je zapanjujuće slično: gradite stablo UI elemenata, svaki čvor je nepromjenjiv, a kada se stanje promijeni, okvir ponovno prolazi kroz to stablo kako bi stvorio ažurirano sučelje.

Jedna ključna razlika je ta što je Flutter po dizajnu višeplatformski. Ista Dart kodna baza može ciljati Android, iOS, web, Windows, macOS i Linux. Compose se širi izvan Androida (na primjer s Compose Multiplatform), ali Flutterova priča o više uređaja trenutno je puno zrelija i kohezivnija, što je upravo razlog zašto mnogi Android-first timovi razmatraju ga kada žele isporučiti na iOS ili stolna računala.

Vaše razumijevanje same Android platforme i dalje je izuzetno vrijedno u Flutter projektima. Dok je sloj korisničkog sučelja čisti Dart i widgeti, Flutter se oslanja na Android (i iOS) za dozvole, konfiguraciju sustava, API-je platforme, obavijesti, rad u pozadini i mnoge druge mogućnosti, kojima se pristupa putem dodataka i kanala platforme. To znači da sva intuicija koju ste stekli o tome kako se Android ponaša ne propada - samo se pomiče jedan sloj niže.

Deklarativni UI model: kompozibilni elementi vs widgeti

I Jetpack Compose i Flutter implementiraju deklarativni UI model: opisujete „kako“ bi UI trebao izgledati za dano stanje, a ne „kako“ mutirati prikaze korak po korak. Umjesto pozivanja settera na prikazima, ponovno izgrađujete svoje stablo kada se stanje promijeni i dopuštate okviru da se učinkovito razlikuje i ponovno iscrtava.

U Jetpack Composeu, UI elementi su kompozibilne funkcije označene s @Composable, često konfiguriran s Modifier. Gumb bi mogao biti Button(onClick = ..., modifier = Modifier.padding(16.dp))Lanac modifikatora ukrašava ili raspoređuje kompozibilni element bez promjene njegovog temeljnog tipa, a Compose koristi rekompoziciju za osvježavanje samo dijelova stabla čiji su se unosi promijenili.

U Flutteru, UI elementi su widgeti - obični Dart objekti koji opisuju konfiguraciju. Također su nepromjenjivi i raspoređeni u stablu, ali umjesto prosljeđivanja modifikatora obično prosljeđujete argumente izgleda ili stiliziranja izravno putem parametara konstruktora ili omotavate widget u druge widgete izgleda. Na primjer, mogli biste napisati Padding(padding: EdgeInsets.all(16), child: ElevatedButton(...)) kako bi se postigao sličan ishod.

Životni ciklus i kompozitnih elemenata i widgeta je namjerno kratak i nepromjenjiv. Žive samo dok novi unos ne zahtijeva njihovu zamjenu; nijedan ne pokušava upravljati vlastitim životnim vijekom niti se izravno mutirati. To je konceptualni pomak od starog svijeta Android Viewa gdje su prikazi dugovječni objekti, ponovno korišteni i mutirani tijekom vremena, i zato se vaš Compose način razmišljanja čini tako prirodnim u Flutteru.

Ispod haube, raspored u oba okvira slijedi isti obrazac vođen od strane roditelja i temeljen na ograničenjima. Roditelj mjeri sebe, prenosi ograničenja, djeca biraju veličinu poštujući ta ograničenja, a roditelj pozicionira svoju djecu. U Flutteru ćete to vidjeti izravno prikazano kao BoxConstraints; u Composeu se to rješava u implementacijama MeasurePolicy. U oba slučaja, roditelji mogu ograničiti djecu - widgeti ne mogu jednostavno odabrati bilo koju veličinu ili položaj koji žele.

Strukturiranje aplikacije: ulazna točka, scaffolding i izgledi

Na Androidu s Composeom, vaša ulazna točka je obično Activity (često a ComponentActivity) gdje zovete setContent za smještaj vaših kompozitnih elemenata. Odatle gradite kompozibilno stablo, obično počevši s MaterialTheme i površinu ili skelu koja definira vaš raspored na visokoj razini.

U Flutteru, ulazna točka je Dart. main funkcija koja poziva runApp s korijenskim widgetom vaše aplikacije. Taj korijen je obično MaterialApp or WidgetsApp widget koji postavlja usmjeravanje, teme, lokalizaciju i osnovni navigator. Prvi "zaslon" koji prikažete često koristi Scaffold widget, koji igra vrlo sličnu ulogu kao Scaffold u Material 3 Compose: daje vam traku aplikacija, tijelo, plutajući gumb za akciju, ladice i tako dalje.

Za jednostavan tekst i statički sadržaj, Compose bi mogao prema zadanim postavkama prelomiti sadržaj - usklađujući veličinu s intrinzičnim sadržajem - dok mnogi Flutter widgeti prema zadanim postavkama zauzimaju više dostupnog prostora osim ako nije ograničen. Na primjer, ako postavite Text sastavljiv unutar stupca, neće automatski popuniti širinu. U Flutteru, Text unutar a Column može se ponašati različito ovisno o ograničenjima roditelja. Za centriranje sadržaja u Flutteru, često ćete stvari omotati u Center widget ili koristite widgete za izgled poput Align, Row, Columni Expanded u kombinaciji sa svojstvima poravnanja.

Linearni rasporedi se gotovo savršeno mapiraju: Compose ima Row i Column, kao i Flutter. U Flutteru prenosite djecu kao List<Widget> i kontrolirati razmak i poravnanje svojstvima kao što su MainAxisAlignment i CrossAxisAlignmentU Composeu se oslanjate na horizontalArrangement, verticalArrangement, horizontalAlignment i verticalAlignmentKoristan način razmišljanja o tome: svojstva koja završavaju na "Arrangement" preslikavaju se na glavnu os Fluttera, a ona koja završavaju na "Alignment" preslikavaju se na poprečnu os.

Kada su vam potrebni relativni ili preklapajući rasporedi, pristupi su također konceptualno usklađeni. U Android XML-u biste mogli posegnuti za RelativeLayout ili ugniježđenu mješavinu LinearLayout i FrameLayoutU Composeu biste sastavili Row, Column i Box (ili napišite prilagođeni izgled). U Flutteru je analogno Row, Column i Stack u kombinaciji s pozicioniranom djecom i opcijama poravnanja. Vaš mentalni model za međusobno raspoređivanje elemenata kreće se gotovo nepromijenjen.

Gumbi, unos i interakcija

U Jetpack Composeu, izrada gumba obično znači korištenje Button ili jedna od njegovih Materijalnih varijanti, koja se pod Materijalom 3 rješava specifičnom implementacijom poput FilledTonalButton. Vi pružate onClick lambda i opcionalno stiliziranje, često putem parametara poput colors ili modifikatori za ispunu, širinu i poravnanje.

U Flutteru, ekvivalent je korištenje widgeta poput FilledButton, ElevatedButton, TextButton or OutlinedButton. Svaki uzima onPressed povratni poziv i child dodatak - najčešće TextMožete ih prilagoditi prosljeđivanjem style preko ButtonStyle ili korištenjem globalnog nadjačavanja teme, koje vam omogućuje centralno podešavanje boje, oblika, elevacije i veličine za cijelu obitelj gumba.

Za rukovanje gestama, Compose se oslanja na modifikatore poput Modifier.clickable u mnogim slučajevima, ali po potrebi možete preći i na specijalizirane detektore gesti. Dugi pritisci, povlačenja i prilagođene geste obično se sastavljaju putem namjenskih API-ja za modifikatore i izvora interakcije.

Flutter otkriva eksplicitnu GestureDetector widget koji omotate oko svega što nema ugrađenu podršku za geste. Nudi širok raspon povratnih poziva: onTap, onDoubleTap, onLongPress, onVerticalDragStart, onVerticalDragUpdate, onHorizontalDragEnd i mnogi drugi. Widgeti poput ElevatedButton već izložiti onPressed svojstvo, ali za potpuno prilagođene UI elemente možete koristiti GestureDetector ili widgete više razine kao što su InkWell za povratnu informaciju o valovitosti materijala.

Unos teksta u Flutteru se upravlja pomoću TextField or TextFormField, čiji je stil paralelan Composeovom TextField i OutlinedTextField kompozitnih materijala. Savjete, oznake, pogreške i okvire konfigurirate pomoću InputDecoration slično kao što ti koristiš TextFieldDefaults ili parametre na poljima za tekst u Composeu. Kao i u Composeu, poruke o pogreškama obično se prikazuju reaktivno promjenom stanja i ponovnom izgradnjom dekoracije, umjesto ručnim manipuliranjem prikazima.

Popisi, rešetke i pomicanje sadržaja

Jetpack Compose nudi dvije glavne strategije za popise: jednostavne Column/Row s iteracijom za male kolekcije i LazyColumn/LazyRow/LazyVerticalGrid/LazyHorizontalGrid za velike ili dinamičke popise. Lijeni kontejneri sastavljaju samo ono što je vidljivo, što održava visoke performanse pri radu s tisućama stavki.

Flutter slijedi isti pristup malih naspram velikih, ali s različitim widgetima. Za mali popis koji stane na ekran mogli biste jednostavno koristiti Column i mapirajte svoje podatke na childrenZa sve što se pomiče, posežete za ListView or GridView, s konstruktorima za izradu koji lijeno stvaraju djecu samo kada je potrebno.

Uobičajeni obrazac u Flutteru je ListView.builder, što odražava DSL stavki lijenog popisa u Composeu. Vi isporučujete itemCount i itemBuilder povratni poziv; Flutter poziva taj alat za izradu s indeksom od 0 do itemCount - 1 kad god se pojavi nova stavka. Unutar alata za izradu možete vratiti gotovo bilo koji widget - od jednostavnog ListTile s tekstom i ikonom do složenih, prilagođenih redaka popisa.

Za mreže, Composeov LazyVerticalGrid i LazyHorizontalGrid mapa za Flutter GridView Widget. Umjesto izravnog prosljeđivanja broja stupaca u mrežu, Flutter često koristi delegata kao što je SliverGridDelegateWithFixedCrossAxisCount or SliverGridDelegateWithMaxCrossAxisExtent za kontrolu rasporeda ćelija. Ovi delegati obuhvaćaju pravila poput "broja stupaca" ili "maksimalne širine ćelije", slično parametrima veličine mreže koje koristite u Composeu.

Ponašanje pomicanja je također analogno u oba alata. Composeove lijene liste dolaze s ugrađenim pomicanjem; ne omotavate ih u dodatne spremnike za pomicanje. U Flutteru se mnogi widgeti s listama i mrežama sami po sebi mogu pomicati, ali za pojedinačni, neponavljajući sadržaj koji bi se trebao pomicati možete koristiti SingleChildScrollViewIzrada prilagođenih stranica s mogućnošću pomicanja tada postaje stvar ugniježđivanja ili sastavljanja isječaka za naprednije slučajeve upotrebe.

Prilagodljivi i responzivni UI obrasci

Compose vam nudi nekoliko strategija za responzivni dizajn: prilagođene izglede, BoxWithConstraints, WindowSizeClass i adaptivnu biblioteku Material 3. Omogućuju vam promjenu kompozicije na temelju dostupnog prostora, položaja i kategorije uređaja, a možete ih i kombinirati ovisno o složenosti projekta.

Flutter ne pokušava izravno zrcaliti te API-je, ali osnovna ideja je ista: pregledati ograničenja i karakteristike zaslona, ​​a zatim granati svoj izgled. Dva glavna alata su LayoutBuilder i MediaQuery. LayoutBuilder prolazi BoxConstraints prema dolje kako biste mogli mijenjati ili preuređivati ​​widgete iznad određenih širina ili visina. MediaQuery otkriva veličinu zaslona, ​​orijentaciju, padding i gustoću piksela za točke prekida visoke razine.

Umjesto ciljanja na jednoznačno preslikavanje između Composeovih adaptivnih rješenja i Flutterovih, učinkovitije je razmišljati u smislu vlastitih dizajnerskih zahtjeva. Nakon što znate kako bi se vaše korisničko sučelje trebalo prilagoditi telefonima, tabletima i stolnim računalima, tu logiku možete izraziti putem Composea WindowSizeClass i adaptivni izgledi ili Flutterovo grananje vođeno ograničenjima i medijima. Isto dizajnersko razmišljanje - različiti API-ji.

Upravljanje stanjem: zapamtite u odnosu na StatefulWidget i dalje

Jetpack Compose pohranjuje kratkotrajno stanje korisničkog sučelja pomoću remember i državni nositelji poput mutableStateOf, često u kombinaciji s ViewModel i arhitektonske komponente za dulje trajanje stanja. Kada se stanje promijeni, događa se rekompozicija i relevantni kompozitni elementi dobivaju nove vrijednosti.

Flutterova priča o niskorazinskim stanjima vrti se oko StatefulWidget i s njim povezano State objekt. Definirate widget koji želi zadržati stanje proširivanjem StatefulWidget, zatim implementirajte zaseban State<MyWidget> klasa za pohranu promjenjivih polja. Kad god ažurirate ta polja, pozivate setState(), što označava taj dio stabla widgeta kao prljav i pokreće ponovnu izgradnju. Na ovoj razini vrlo je slično pohranjivanju stanja sastavljanja s remember i poništavanje kompoztabilnih elemenata kada se vrijednosti promijene.

Za složenije aplikacije, Flutter se uvelike oslanja na obrasce zajednice i prve strane: Provider, Riverpod, Bloc, trgovine u stilu Reduxa i još mnogo toga. Oni djeluju kao analozi vaših Android arhitekturnih stekova: ViewModel + LiveData/Flow + repozitoriji u Compose projektima. Centraliziraju poslovnu logiku i otkrivaju reaktivne tokove podataka koji pokreću ponovnu izgradnju widgeta. Iz Compose pozadine, mnogi od ovih obrazaca bit će vam poznati čak i ako se API-ji razlikuju.

Jedna stvar koja često iznenađuje Android developere jest da se i widgeti bez stanja i widgeti sa stanjem u Flutteru često obnavljaju - potencijalno svaki kadar tijekom animacija. Razlika nije u učestalosti obnove, već u tome gdje se pohranjuje promjenjivo stanje: StatefulWidget daje ti društvo State objekt koji preživi ponovne izgradnje, slično kao što remember omogućuje vrijednostima da prežive rekompoziciju u Composeu.

Crtanje, animacija i vizualno dotjerivanje

Ako ste ikada izravno radili s Androidom Canvas i Drawable, Composeov Canvas composable se vjerojatno činio jednostavnim. Pruža deklarativni način crtanja oblika, slika i teksta u Kotlinu, skrivajući mnogo imperativne ceremonije tradicionalnih prilagođenih prikaza.

Flutter otkriva sličnu površinu za crtanje kroz Canvas API, pristupljeno putem CustomPaint i CustomPainter. Implementirate CustomPainter klasa u kojoj prepisujete paint metoda crtanja na platnu pomoću Paint objekte, putanje, transformacije i tako dalje. Zatim taj alat za slikanje pridružujete CustomPaint widget. I Compose i Flutter se oslanjaju na Skia engine, tako da primitivi - linije, putanje, shaderi - izgledaju vrlo poznato iz Androidovog 2D renderiranja.

Za animacije, Flutter se oslanja na eksplicitni animacijski sustav izgrađen oko AnimationController, Animation<T> i Tweens, plus bogat skup animiranih widgeta. Stvarate instancu kontrolera (obično s SingleTickerProviderStateMixin za vsync), definirajte CurvedAnimations ili Tweens koji mapiraju napredak od 0 do 1 u vrijednosti domene, a zatim ih povežite s widgetima poput FadeTransition, ScaleTransition, AnimatedBuilder ili implicitne widgete kao što su AnimatedContainerAnimacijski sustav također otkriva AnimationStatus povratne funkcije za reakciju na početak, završetak ili poništavanje.

Jetpack Composeovi animacijski API-ji su deklarativni od vrha do dna, s funkcijama poput animate*AsState, prijelazi i animirana vidljivost. Umjesto ručnog upravljanja kontrolerima u većini uobičajenih slučajeva, opisujete ciljna stanja, a okvir s vremenom upravlja interpolacijom. Kada vam je potrebna više prilagođene kontrole, i dalje imate pristup primitivima niske razine, ali uobičajeni put je sažetiji od klasičnog Android XML-a ili imperativnog animacijskog koda.

Konceptualno, oba seta alata koristite na isti način: widgeti/kompozitni elementi trebaju biti lagani i čisti, kroz njih se propuštaju vremenski promjenjive vrijednosti, a okvir se mora baviti interpolacijom i poništavanjem. Kao Compose developer, dodatna eksplicitnost Flutterovog AnimationController Možda se u početku čini malo staromodno, ali vam daje vrlo preciznu kontrolu nad vremenom, krivuljama i orkestracijom.

Stiliziranje, teme, fontovi i resursi

Moderne aplikacije žive ili umiru od uglađenosti, pa i Flutter i Compose stavljaju veliki naglasak na teme i stiliziranje. Sastavite upotrebu MaterialTheme s shemama boja, tipografijom i definicijama oblika, a teme možete ugnijezditi kako biste nadjačali vrijednosti za podstabla - uključujući prisiljavanje svijetlih ili tamnih površina za određena područja.

U Flutteru, ekvivalent je ThemeData prošao MaterialApp or Theme widgeti. Definirate primarne boje, svjetlinu, tipografiju i teme specifične za komponente poput elevatedButtonTheme, textButtonTheme, appBarTheme i više. Teme možete lokalno nadjačati tako da podstabla omotate u Theme widgeti koji kopiraju roditelja i prilagođavaju određena polja. Svijetli i tamni način rada mogu se prebacivati ​​na razini aplikacije pružanjem theme i darkTheme i kontroliranje themeMode.

Stiliziranje teksta je poznato područje: u Composeu ili izravno prosljeđujete jednostavna svojstva u Text ili dostaviti TextStyle objekt. Flutter to odražava s Text widget koji prihvaća TextStyle preko svog style parametar. TextStyle obuhvaća obitelj fontova, veličinu, debljinu, razmak između slova, visinu retka, ukrašavanje i još mnogo toga. Možete definirati globalne tekstualne teme u ThemeData.textTheme i referencirajte ih svugdje, baš kao što biste koristili tipografiju iz MaterialTheme u Composeu.

Fontovi i slike se obrađuju putem resursa, a ne tradicionalnog Androidovog načina rada. /res stablo direktorija. Flutter ne nameće određeni raspored mapa; sredstva se deklariraju u pubspec.yaml a zatim ih referencirati iz koda. Slike se obično učitavaju s Image.asset(), što se rješava u ispravnu skupinu gustoće na temelju devicePixelRatioLogički pikseli igraju istu ulogu kao dp na Androidu, apstrahirajući fizičku gustoću piksela.

Za prilagođene fontove, Compose vam omogućuje pakiranje resursa fonta ili njihovo preuzimanje tijekom izvođenja putem pružatelja usluga poput Google Fontova, a zatim njihovo povezivanje u FontFamily i tipografija. Flutter koristi gotovo isti obrazac: datoteke fontova stavlja u mapu resursa, navodi ih u pubspec.yaml, a zatim navedite naziv obitelji fontova u TextStyleAko želite fontove koji se dohvaćaju tijekom izvođenja programa, postoji popularan google_fonts dodatak koji otkriva Dart funkcije nazvane po fontovima - npr. GoogleFonts.robotoTextTheme()—kako biste ih brzo povezali sa svojom temom.

Oba ekosustava tretiraju stringove i lokalizaciju kao prvorazredne probleme, iako Flutter nema izravni ekvivalent Androidovim XML string resursima. Umjesto toga, najbolja praksa je zadržati prijevode u .arb datoteke i povezati ih s Flutter alatima za lokalizaciju. Pristup se zatim odvija putem generiranih Dart klasa, otprilike analogno korištenju R.string identifikatori u Android kodu.

Koncepti Android platforme kroz Flutter prizmu

Osim korisničkog sučelja, jedno od najvećih pitanja koje imaju Compose programeri jest kako se njihovo znanje o Androidu preslikava na Flutterovu arhitekturu. Srećom, mnoge ključne ideje - aktivnosti, životni ciklus, namjere, pozadinski rad, resursi, umrežavanje - imaju jasne ekvivalente, čak i ako površinski API izgleda drugačije.

U Androidu, Activity i Fragment su vaši primarni ekrani i spremnici; u Flutteru je sve widget, a navigacija se događa putem Navigator i Route objekata. Ruta otprilike odgovara aktivnosti ili fragmentu, ali obično postoji samo jedno mjesto za hosting. Activity na Androidu koji ugrađuje Flutter engine. Rute se dodaju i izbacuju na Navigatorov stog, bilo putem imenovanih ruta definiranih u MaterialApp ili putem izravno izgrađenog PageRoute slučajevi poput MaterialPageRoute.

Povratni pozivi životnog ciklusa Androida (onCreate, onStart, onResumeitd.) nemaju jedan-na-jedan hooks u Flutter kodu, ali možete promatrati životni ciklus aplikacije pomoću WidgetsBindingObserver. Izlaže države poput resumed, inactive, paused i detached, što otprilike odgovara Androidovim fazama vidljivosti, pozadine i uništenja. Kada vam zaista trebaju niskorazinski hookovi životnog ciklusa za upravljanje resursima, obično ih implementirate na izvornoj Android strani u FlutterActivity ili dodatak, ne u Dartu.

Namjere na Androidu imaju dvije uloge: navigaciju unutar aplikacije i komunikaciju između aplikacija. Kao što je spomenuto, Flutter nema API za navigaciju temeljen na namjeri - Navigator ga u potpunosti zamjenjuje unutar Darta. Za zadatke unutar više aplikacija (pokretanje kamere, odabir datoteka, rukovanje namjerama dijeljenja) obično se koriste dodaci koji obuhvaćaju potrebne Android (i iOS) pozive. Ako ne postoji dodatak, možete napisati vlastiti pomoću MethodChannels za komunikaciju između Darta i izvornog koda, prosljeđujući namjere i rezultate kao poruke.

Tvoje razumijevanje rada u pozadini i niti se također prenosi, ali primitivi izgledaju drugačije. Android vas potiče da premjestite mrežne i diskovne I/O operacije s glavne niti pomoću korutina, AsyncTask-a (legacy), WorkManager-a, JobScheduler-a, RxJava-e i tako dalje. Dart, nasuprot tome, koristi jednonitnu petlju događaja po izolatu, s async/await za I/O operacije i odvojenim izolatima za rad koji zahtijeva puno CPU-a. Za sve što je vezano uz I/O operacije, samo označite svoje funkcije. async, await operaciju i pustite da petlja događaja održava korisničko sučelje responzivnim; za zahtjevne CPU zadatke pokrećete izolat i komunicirate putem prosljeđivanja poruka umjesto dijeljene memorije.

Što se tiče umrežavanja, Flutter je popularan http Paket igra ulogu sličnu OkHttp + Retrofit za osnovne slučajeve upotrebe. Skriva većinu rada s niskorazinskim utičnicama i prirodno se integrira s async/await. Za složene potrebe možete prijeći na pakete poput dio, ali osnovni obrazac ostaje: uputiti asinkroni poziv, pričekati rezultat, ažurirati stanje s setState() ili odabranog upravitelja stanja i ponovno izgradite pogođene widgete.

Dodaci, pohrana, Firebase i alati

Na Androidu ste navikli deklarirati ovisnosti u Gradleu; u Flutteru ih deklarirate u pubspec.yaml i dohvatite ih s pub.dev. Gradle datoteke pod android/ Mapa Flutter projekta uglavnom je namijenjena integracijama specifičnim za platformu ili kada su vam potrebne prilagođene izvorne biblioteke - svakodnevni razvoj aplikacija ostaje u Dartu.

Zajedničke postavke i SQLite također imaju gotove ekvivalente. Gdje Android nudi SharedPreferences za pohranu malih ključeva i vrijednosti i SQLite (ili Room) za strukturirane podatke, Flutter ih omotava putem dodataka poput shared_preferences i sqfliteOvi dodaci ujedinjuju ponašanje Androida i iOS-a tako da možete koristiti jedan Dart API bez obzira na platformu, a istovremeno se oslanjati na temeljne izvorne implementacije.

Integracija s Firebaseom je slično jednostavna i vrhunska. Većina Firebase usluga - Authentication, Firestore, Realtime Database, Cloud Messaging, Analytics, Remote Config i druge - imaju službene Flutter dodatke koje održavaju Firebase i Flutter timovi. Oni odražavaju konceptualni model iz Androidovih Firebase SDK-ova, ali s Dart-idiomatic API-jima. Za više nišnih Firebase značajki koje nisu izravno obuhvaćene, postoji zdrav ekosustav dodataka trećih strana na pub.dev.

Za otklanjanje pogrešaka i profiliranje, Flutterov DevTools paket pruža vam bogat alatni skup koji je izravno usporediv s profilerom i Layout Inspectorom Android Studija. Možete pregledati stablo widgeta, pratiti ponovne izgradnje, nadzirati alokacije memorije, dijagnosticirati curenja i fragmentaciju te proći kroz Dart kod. U kombinaciji s IDE podrškom u Android Studiju i VS Codeu, vrućim ponovnim pokretanjem i vrućim ponovnim pokretanjem, ciklus povratnih informacija u Flutter razvoju osjeća se barem jednako čvrsto - a često i čvršće - od onoga na što ste navikli s Composeom.

Push obavijesti, još jedan čest problem s Androidom, u Flutteru se rješavaju putem dodataka poput firebase_messaging. Ispod haube, oni komuniciraju s Firebase Cloud Messagingom i izvornim okvirima za obavijesti na Androidu i iOS-u, ali logika vaše aplikacije nalazi se u ujedinjenom Dart API-ju. Konfiguracija i ponašanja specifična za platformu (poput kanala za obavijesti na Androidu) i dalje su važni, a vaše postojeće iskustvo s tim detaljima platforme i dalje je vrlo relevantno.

Čak se i widgeti početnog zaslona na Androidu, koji se ne mogu implementirati isključivo u Flutteru, i dalje mogu integrirati s Flutter kodom. Obično ih gradite pomoću Jetpack Glance ili XML rasporeda, a zatim koristite paket kao što je home_widget za komunikaciju s vašom Flutter aplikacijom, dijeljenje podataka, pa čak i ugrađivanje rasteriziranog Flutter korisničkog sučelja kao slike unutar izvornog widgeta. Taj hibridni pristup omogućuje vam da zadržite svoje glavno iskustvo u Flutteru uz poštivanje ograničenja platforme.

Gledajući sve ove paralele, Jetpack Compose programer koji ulazi u Flutter uopće ne počinje od nule. Vaše razumijevanje deklarativnog korisničkog sučelja, životnog ciklusa Androida, navigacije, stanja, resursa i asinkronog rada vrlo se prirodno preslikava na Flutterov svijet; ono što se najviše mijenja su imena, jezik (Dart) i višeplatformski način razmišljanja. Nakon što internalizirate widgete i Navigator kao temeljne koncepte, ostatak sustava obično se prilično brzo uklopi.