Front-end webfejlesztőként kezdtem, majd a Csapkod fejlesztő. Azt hiszem, voltak olyan koncepciók, amelyek segítettek könnyebben elfogadnom a Fluttert. Volt néhány új koncepció is, amelyek eltérőek voltak.
Ebben a cikkben szeretném megosztani tapasztalataimat, és inspirálni akarok mindenkit, aki úgy érzi, hogy megbénul az egyik ökoszisztéma választása a másikkal szemben, bemutatva, hogyan változnak át a fogalmak, és hogyan tanulhatók meg az új fogalmak.
Fogalmak, amelyek átkerültek
Ez a rész azokat a helyeket mutatja be, ahol a front-end webfejlesztés és a Flutter hasonlít. Elmagyarázza a már meglévő képességeit, amelyek előnyt jelentenek az Ön számára, ha elindítja a Fluttert.
1. Felhasználói felületek (UI-k) megvalósítása
Ha egy adott felhasználói felületet a webes felületen szeretne megvalósítani, össze kell állítania a HTML-elemeket, és CSS-szel kell stílusoznia őket. A felhasználói felületek Flutterben való megvalósításához komponálni kell widgetek és stílusozzuk őket ingatlanait.
A CSS-hez hasonlóan a Color osztály a Dartban az „rgba” és a „hex” kifejezésekkel működik. A CSS-hez hasonlóan a Flutter is pixeleket használ a hely- és méretegységek meghatározásához.
A Flutterben szinte minden CSS-tulajdonsághoz és értékükhöz vannak Dart osztályok és enumok. Például:
Flutternek is van Column és a Row kütyü. Ezek a Flutter megfelelőjei display: flex a CSS-ben. A konfiguráláshoz justify-content és a align-items stílusokat használ MainAxisAlignment és a CrossAxisAlignment tulajdonságait. A beállításhoz a flex-grow stílusban csomagolja be az érintett gyermek(ek) widgete(ke)t Column/Row, egy Expanded or Flexible.
A fejlett felhasználói felületekhez a Flutter rendelkezik a CustomPaint osztály – ez a Flutter, amit a Canvas API a webfejlesztéshez tartozik. CustomPaint ad egy festőt, aki tetszőleges felhasználói felületet rajzolhat. Általában használni fogod CustomPaint amikor valami igazán összetett dolgot akarsz. Is, CustomPaint ez a legjobb módja, ha a widgetek kombinációja nem működik.
2. Fejlesztés többszörösre Képernyőfelbontások
A webhelyek böngészőkön futnak, a mobilalkalmazások pedig az eszközökön. Mint ilyen, amikor bármelyik platformra fejleszt, szem előtt kell tartania a platformot. Mindegyik platform ugyanazokat a funkciókat (kamera, hely, értesítések stb.) más-más módon valósítja meg.
Webfejlesztőként Ön webhelye reagálóképességére gondol. Médialekérdezések segítségével kezelheti, hogyan néz ki webhelye kisebb és szélesebb képernyőkön.
A mobilweb-fejlesztésről áttérve a Flutterre, megvan a MediaQuery segítő osztály. A MediaQuery osztály adja meg az aktuális eszközt orientation (táj vagy portré). Megadja az aktuális nézetet is size, a devicePixelRatio, többek között a készülékre vonatkozó információk mellett. Ezek az értékek együttesen betekintést nyújtanak a mobileszköz konfigurációjába. Segítségükkel módosíthatja, hogyan nézzen ki mobilalkalmazása különböző képernyőméreteken.
3. Hibakeresők, szerkesztők és parancssori eszközök használata
Az asztali böngészők fejlesztői eszközökkel rendelkeznek. Ezek az eszközök közé tartozik az ellenőr, a konzol, a hálózati monitor stb. Ezek az eszközök javítják a webfejlesztési folyamatot. A flutternek is megvan a maga DevTools. Többek között rendelkezik widget-ellenőrzővel, hibakeresővel és hálózati monitorral.
Az IDE támogatás is hasonló. A Visual Studio Code az egyik legnépszerűbb webfejlesztési IDE. A VS Code-hoz számos webes bővítmény létezik. A Flutter is támogatja a VS Code-ot. Tehát az átállás során nem kell módosítania az IDE-t. Vannak Dart és Flutter kiterjesztések a VS Code-hoz. A Flutter az Android Stúdióval is jól működik. Az Android Studio és a VS Code is támogatja a Flutter DevTools alkalmazást. Ezek az IDE-integrációk teszik teljessé a Flutter-eszközöket.
A legtöbb előtérbeli JavaScript-keretrendszer a hozzájuk tartozik parancssori felület (CLI). Például: Szögletes CLI, Hozzon létre React alkalmazást, CLI nézetstb. A Flutterhez exkluzív is tartozik CLI. A Flutter CLI lehetővé teszi Angular projektek építését, létrehozását és fejlesztését. Parancsokkal rendelkezik a Flutter projektek elemzéséhez és teszteléséhez.
Új fogalmak
Ez a rész a Flutter-specifikus koncepciókról szól, amelyek könnyebbek vagy egyáltalán nem léteznek a webfejlesztésben. Elmagyarázza azokat az ötleteket, amelyeket szem előtt kell tartania, amikor belép a Flutterbe.
Hogyan kezeljük a görgetést
Webes fejlesztéskor az alapértelmezett görgetési viselkedést a webböngészők kezelik. Ennek ellenére szabadon testreszabhatja a görgetést a CSS segítségével (a overflow).
A Flutterben ez nem így van. A modulcsoportok alapértelmezés szerint nem gördülnek. Ha úgy érzi, hogy a widgetcsoportok túlcsordulhatnak, proaktívan be kell állítania a görgetést.
A Flutterben a görgetést speciális widgetek használatával konfigurálhatja, amelyek lehetővé teszik a görgetést. Például: ListView, SingleChildScrollView, CustomScrollViewstb. Ezekkel a görgethető widgetekkel nagyszerűen szabályozhatja a görgetést. Val vel CustomScrollView, szakértői és összetett görgetési mechanizmusokat konfigurálhat az alkalmazáson belül.
Flutter oldalán, használva ScrollViews elkerülhetetlen. Android és iOS rendelkezik ScrollView és a UIScrollView a görgetés kezeléséhez. A Flutternek szüksége van egy módra, amely segítségével egyesítheti a megjelenítési és fejlesztői élményt ScrollViews, is.
Segíthet abbahagyni a dokumentumstruktúra áramlásán való gondolkodást, és ehelyett az alkalmazást egy nyitott vászonnak tekinteni az eszköz natív festési mechanizmusai számára.
2. Fejlesztői környezet beállítása
A legegyszerűbb webhely létrehozásához létrehozhat egy fájlt a .html kiterjesztést, és nyissa meg a böngészőben. A lebegés nem ilyen egyszerű. A Flutter használatához telepítenie kell a Flutter SDK-t és a beállította a Fluttert egy teszteszközhöz. Tehát ha szeretné kódolni a Fluttert Androidra, akkor ezt meg kell tennie állítsa be az Android SDK-t. Ezenkívül konfigurálnia kell legalább egy Android-eszközt (Android-emulátort vagy fizikai eszközt).
Ugyanez vonatkozik az Apple eszközökre (iOS és macOS). A Flutter Macre történő telepítése után továbbra is be kell állítania az Xcode-ot, mielőtt továbblépne. A Flutter iOS rendszeren való teszteléséhez legalább egy iOS-szimulátorra vagy egy iPhone-ra lesz szüksége. A Flutter asztali számítógépekhez is jelentős beállítás. Windows rendszeren be kell állítania a Windows Development SDK-t a Visual Studio (nem a VS Code) segítségével. Linuxon több csomagot fog telepíteni.
Extra beállítás nélkül a Flutter működik böngészőkön. Ennek eredményeként figyelmen kívül hagyhatja a céleszközök extra beállítását. A legtöbb esetben a Fluttert használja mobilalkalmazás-fejlesztéshez. Ezért legalább Androidot vagy iOS-t szeretne beállítani. Flutter jön a flutter doctor parancs. Ez a parancs jelenti a fejlesztési beállítások állapotát. Így szükség esetén tudja, min dolgozzon a beállításban.
Ez nem jelenti azt, hogy a Flutter fejlesztése lassú. A Flutter erős motorral érkezik. A flutter run parancs engedélyezi a teszteszközre történő forró újratöltést kódolás közben. De akkor meg kell nyomni R hogy valójában hot-reload. Ez nem kérdés. A Flutter VS Code kiterjesztése lehetővé teszi az automatikus újratöltést a fájlmódosításoknál.
3. Csomagolás és telepítés
A webhelyek telepítése olcsóbb és egyszerűbb, mint a mobilalkalmazások telepítése. Webhelyek telepítésekor domainneveken keresztül érheti el őket. Ezeket a domain neveket általában évente megújítják. Ezek azonban nem kötelezőek.
Ma számos platform ingyenes tárhelyet kínál.
Például: DigitalOcean ingyenes aldomaint biztosít .ondigitalocean.com.
Ezeket a domaineket akkor használhatja, ha dokumentációs webhelyet készít. Akkor is használhatja őket, ha nem aggódik a márkaépítés miatt.
A Flutter mobilalkalmazások világában a legtöbb esetben két helyen telepíti az alkalmazást.
Mindegyik platformon regisztrálnia kell egy fejlesztői fiókot. A fejlesztői fiók regisztrálása díjat vagy előfizetést és személyazonosság-ellenőrzést igényel.
Az App Store használatához regisztrálnia kell az Apple Developer programra. Karban kell tartanod éves előfizetés 99 dollár. A Google Playhez létre kell hoznia a egyszeri 25 USD fizetés a fiók számára.
Ezek az üzletek minden felülvizsgált alkalmazást áttekintenek, mielőtt megjelennének.
Ne feledje, hogy a felhasználók nem könnyen fogyasztják el az alkalmazásfrissítéseket. A felhasználóknak kifejezetten frissíteniük kell a telepített alkalmazásokat. Ez ellentétben áll az internettel, ahol mindenki csak a webhely legújabb telepített verzióját láthatja.
A telepített alkalmazások kezelése viszonylag megterhelőbb, mint a telepített webhelyek kezelése. Ennek azonban nem szabad megijesztenie. Végül is több millió alkalmazás van telepítve mindkét üzletben, így Ön is hozzáadhatja a sajátját.
További gondolatok a Flutterről
A Flutter egy többplatformos eszköz asztali, mobil- vagy webes alkalmazások készítéséhez. A Flutter alkalmazások pixel-tökéletesek. A Flutter ugyanazt a felhasználói felületet festi le minden alkalmazásban, függetlenül a célplatformtól. Ennek az az oka, hogy minden Flutter alkalmazás tartalmazza a Flutter motort. Ez a motor a Flutter UI kódot jeleníti meg. A Flutter minden eszközhöz biztosít egy vásznat, és lehetővé teszi, hogy tetszés szerint festhessen. A motor kommunikál a célplatformmal az események és interakciók kezelése érdekében.
A flutter hatékony. Nagy teljesítményszintekkel rendelkezik. Ez azért van, mert Dart-tal készült, és kihasználja a Dart funkcióit.
Ezzel a sok előnnyel a Flutter jó választás számos alkalmazáshoz. A többplatformos alkalmazások pénzt és időt takarítanak meg a gyártás és a karbantartás során. Előfordulhat azonban, hogy a Flutter (és a többplatformos megoldások) bizonyos esetekben nem az optimális választás.
Ne használja a Fluttert, ha azt szeretné, hogy a felhasználók platformfejlesztő eszközöket használjanak az alkalmazásához. A platformfejlesztői eszközök itt olyan eszközspecifikus eszközöket jelentenek, mint például az Android fejlesztői lehetőségei. Böngészőfejlesztői eszközöket is tartalmaz.
Ne használja a Flutter for web alkalmazást, ha arra számít, hogy a böngészőbővítmények kölcsönhatásba lépnek a webhelypel.
Ezenkívül ne használja a Fluttert nagy tartalommal rendelkező webhelyekhez.
Következtetés
Ez olyan készségek áttekintése volt, amelyek a front-end webfejlesztéstől a Flutterrel való munkavégzésig átvihetők. Megbeszéltük azokat az alkalmazásfejlesztési koncepciókat is, amelyeket webfejlesztőként meg kell tanulnia.
A Flutter egyszerűbb a webfejlesztők számára, mert mindkettő magában foglalja a felhasználói felületek megvalósítását. Ha elindítja a Fluttert, rá fog jönni, hogy jó fejlesztői élményt nyújt. Próbáld ki Fluttert! Használja mobilalkalmazások készítéséhez, és természetesen mutassa be, amit készített.
Egészségére!
