Zaczynałem jako front-end web developer, a potem zostałem Flutter deweloper. Myślę, że były pewne koncepcje, które pomogły mi łatwiej zaadoptować Fluttera. Pojawiły się też nowe koncepcje, które były inne.
W tym artykule chcę podzielić się moim doświadczeniem i zainspirować każdego, kto czuje się sparaliżowany wyborem jednego ekosystemu, pokazując, w jaki sposób koncepcje przenoszą się i można nauczyć się nowych koncepcji.
Koncepcje, które się przeniosły
Ta sekcja pokazuje miejsca, w których przypominają tworzenie stron internetowych i Flutter. Wyjaśnia umiejętności, które już posiadasz, które są dla ciebie zaletą, jeśli uruchomisz Fluttera.
1. Implementacja interfejsów użytkownika (UI)
Aby zaimplementować dany interfejs użytkownika w sieci front-end, komponujesz elementy HTML i stylizujesz je za pomocą CSS. Aby zaimplementować interfejsy użytkownika we Flutterze, komponujesz widgety i stylizuj je za pomocą niska zabudowa.
Podobnie jak CSS, Color class w Dart działa z „rgba” i „hex”. Podobnie jak CSS, Flutter używa pikseli jako jednostek przestrzeni i rozmiaru.
We Flutterze mamy klasy Dart i wyliczenia dla prawie wszystkich właściwości CSS i ich wartości. Na przykład:
Flutter również ma Column i Row widżety. To są odpowiedniki Fluttera dla display: flex w CSS. Konfigurować justify-content i align-items style, których używasz MainAxisAlignment i CrossAxisAlignment nieruchomości. Aby dostosować flex-grow styl, zawinąć dotknięte widżety potomne (dzieci) z Column/Row, w Expanded or Flexible.
W przypadku zaawansowanych interfejsów Flutter ma CustomPaint klasa – to dla Fluttera to, co Canvas API jest tworzenie stron internetowych. CustomPaint daje malarzowi, który narysuje dowolny interfejs użytkownika, jak chcesz. Zwykle będziesz używać CustomPaint kiedy chcesz czegoś naprawdę złożonego. Również, CustomPaint jest najlepszym sposobem, gdy kombinacja widżetów nie działa.
2. Rozwijanie dla wielu Rozdzielczości ekranu
Strony internetowe działają w przeglądarkach, a aplikacje mobilne działają na urządzeniach. W związku z tym, podczas programowania dla obu platform, musisz pamiętać o platformie. Każda platforma implementuje te same funkcje (kamera, lokalizacja, powiadomienia itp.) na różne sposoby.
Jako twórca stron internetowych myślisz o responsywności swojej witryny. Używasz zapytań medialnych, aby poradzić sobie z tym, jak Twoja witryna wygląda na mniejszych i szerszych ekranach.
Przechodząc od tworzenia stron mobilnych do Fluttera, masz MediaQuery klasa pomocnicza. The MediaQuery klasa podaje aktualne urządzenie orientation (pejzaż lub portret). Daje ci również aktualny widok sizeThe devicePixelRatio, między innymi informacjami o urządzeniu. Razem te wartości dają wgląd w konfigurację urządzenia mobilnego. Możesz ich użyć, aby zmienić wygląd swojej aplikacji mobilnej na różnych rozmiarach ekranu.
3. Praca z debugerami, edytorami i narzędziami wiersza poleceń
Przeglądarki komputerowe mają narzędzia programistyczne. Narzędzia te obejmują inspektora, konsolę, monitor sieci itp. Narzędzia te usprawniają proces tworzenia stron internetowych. Flutter też ma swoje DevTools. Ma między innymi inspektora widgetów, debugger, monitor sieci.
Obsługa IDE jest również podobna. Visual Studio Code to jedno z najpopularniejszych IDE do tworzenia stron internetowych. Istnieje wiele rozszerzeń internetowych dla VS Code. Flutter również obsługuje VS Code. Tak więc podczas przejścia nie musisz zmieniać środowiska IDE. Istnieją rozszerzenia Dart i Flutter dla VS Code. Flutter działa również dobrze z Android Studio. Zarówno Android Studio, jak i VS Code obsługują Flutter DevTools. Te integracje IDE sprawiają, że oprzyrządowanie Flutter jest kompletne.
Większość front-endowych frameworków JavaScript jest dostarczana z ich interfejs wiersza poleceń (CLI). Na przykład: Kątowy CLI, Utwórz aplikację React, Widok CLI, itp. Flutter ma również ekskluzywny CLI. Flutter CLI umożliwia budowanie, tworzenie i rozwijanie projektów Angular. Posiada komendy do analizowania i testowania projektów Fluttera.
Koncepcje, które były nowe
Ta sekcja omawia koncepcje specyficzne dla Fluttera, które są łatwiejsze lub nie istnieją w tworzeniu stron internetowych. Wyjaśnia pomysły, o których powinieneś pamiętać, gdy wchodzisz do Flutter.
Jak radzić sobie z przewijaniem
Podczas tworzenia aplikacji internetowych domyślne zachowanie przewijania jest obsługiwane przez przeglądarki internetowe. Możesz jednak dostosować przewijanie za pomocą CSS (używając overflow).
Tak nie jest w przypadku Fluttera. Grupy widżetów domyślnie nie przewijają się. Gdy wyczujesz, że grupy widżetów mogą się przepełnić, musisz proaktywnie skonfigurować przewijanie.
W Flutter konfigurujesz przewijanie za pomocą osobliwych widżetów, które umożliwiają przewijanie. Na przykład: ListView, SingleChildScrollView, CustomScrollViewitp. Te przewijalne widżety zapewniają doskonałą kontrolę nad przewijaniem. Z CustomScrollView, możesz skonfigurować zaawansowane i złożone mechanizmy przewijania w aplikacji.
Po stronie Fluttera, używając ScrollViews jest nieuniknione. Android i iOS mają ScrollView i UIScrollView do obsługi przewijania. Flutter potrzebuje sposobu na ujednolicenie renderowania i doświadczenia programisty za pomocą jego ScrollViews, też.
Może pomóc przestać myśleć o przepływie struktury dokumentu i zamiast tego traktować aplikację jako otwarte płótno dla natywnych mechanizmów malowania urządzenia.
2. Konfigurowanie środowiska programistycznego
Aby stworzyć najprostszą stronę internetową, możesz utworzyć plik z .html rozszerzenie i otwórz je w przeglądarce. Flutter nie jest taki prosty. Aby korzystać z Flutter, musisz mieć zainstalowany pakiet Flutter SDK i skonfigurowałeś Flutter dla urządzenia testowego. Więc jeśli chcesz kodować Fluttera na Androida, musisz skonfiguruj Android SDK. Będziesz także musiał skonfigurować co najmniej jedno urządzenie z Androidem (emulator Androida lub urządzenie fizyczne).
To samo dotyczy urządzeń Apple (iOS i macOS). Po zainstalowaniu Fluttera na Macu nadal musisz skonfigurować Xcode, zanim przejdziesz dalej. Będziesz także potrzebował przynajmniej symulatora iOS lub iPhone'a, aby przetestować Fluttera na iOS. Flutter dla komputerów stacjonarnych to również znacząca konfiguracja. W systemie Windows musisz skonfigurować Windows Development SDK z programem Visual Studio (nie VS Code). W systemie Linux zainstalujesz więcej pakietów.
Bez dodatkowej konfiguracji Flutter działa w przeglądarkach. W rezultacie możesz przeoczyć dodatkową konfigurację urządzeń docelowych. W większości przypadków użyjesz Fluttera do tworzenia aplikacji mobilnych. Dlatego chciałbyś skonfigurować co najmniej Androida lub iOS. Flutter pochodzi z flutter doctor Komenda. To polecenie zgłasza stan konfiguracji programistycznej. W ten sposób wiesz, nad czym pracować w konfiguracji, jeśli zajdzie taka potrzeba.
Nie oznacza to, że rozwój we Flutterze jest powolny. Flutter jest wyposażony w potężny silnik. The flutter run Polecenie pozwala na ponowne ładowanie urządzenia testowego podczas kodowania. Ale wtedy będziesz musiał nacisnąć R faktycznie przeładować na gorąco. To nie jest problem. Rozszerzenie VS Code firmy Flutter umożliwia automatyczne przeładowanie na gorąco po zmianach plików.
3. Pakowanie i wdrażanie
Wdrażanie stron internetowych jest tańsze i łatwiejsze w porównaniu z wdrażaniem aplikacji mobilnych. Wdrażając witryny internetowe, uzyskujesz do nich dostęp za pośrednictwem nazw domen. Te nazwy domen są zwykle odnawiane co roku. Są jednak opcjonalne.
Obecnie wiele platform oferuje darmowy hosting.
Na przykład: DigitalOcean daje ci darmową subdomenę on .ondigitalocean.com.
Możesz użyć tych domen, jeśli tworzysz witrynę z dokumentacją. Możesz ich używać również wtedy, gdy nie martwisz się o branding.
W świecie Fluttera z aplikacjami mobilnymi zazwyczaj w większości przypadków wdrażasz swoją aplikację w dwóch miejscach.
Musisz zarejestrować konto programisty na każdej z tych platform. Rejestracja konta programisty wymaga opłaty lub subskrypcji i weryfikacji tożsamości.
W przypadku App Store musisz zarejestrować się w programie Apple Developer. Musisz utrzymać roczna subskrypcja 99. W przypadku Google Play musisz wykonać jednorazowa płatność 25 USD dla konta.
Te sklepy sprawdzają każdą sprawdzaną aplikację, zanim zostanie opublikowana.
Pamiętaj też, że użytkownicy nie mogą łatwo korzystać z aktualizacji aplikacji. Użytkownicy muszą jawnie aktualizować zainstalowane aplikacje. Jest to w przeciwieństwie do sieci, w której każdy może po prostu zobaczyć najnowszą wdrożoną wersję witryny.
Zarządzanie wdrożonymi aplikacjami jest stosunkowo bardziej wymagające niż zarządzanie wdrożonymi witrynami internetowymi. Nie powinno cię to jednak przestraszyć. W końcu w każdym ze sklepów wdrożono miliony aplikacji, więc możesz też dodać swoje.
Dodatkowe myśli o trzepotaniu
Flutter to wieloplatformowe narzędzie do tworzenia aplikacji komputerowych, mobilnych lub internetowych. Aplikacje Flutter są idealne do pikseli. Flutter maluje ten sam interfejs użytkownika w każdej aplikacji, niezależnie od platformy docelowej. Dzieje się tak, ponieważ każda aplikacja Flutter zawiera silnik Flutter. Ten silnik renderuje kod interfejsu Flutter UI. Flutter zapewnia płótno dla każdego urządzenia i pozwala malować tak, jak chcesz. Silnik komunikuje się z platformą docelową w celu obsługi zdarzeń i interakcji.
Flutter jest wydajny. Ma wysoki poziom wydajności. Dzieje się tak dlatego, że jest zbudowany z Dart i wykorzystuje funkcje Darta.
Dzięki tym licznym zaletom Flutter jest dobrym wyborem do wielu zastosowań. Aplikacje wieloplatformowe oszczędzają pieniądze i czas podczas produkcji i konserwacji. Jednak w niektórych przypadkach Flutter (i rozwiązania wieloplatformowe) może nie być optymalnym wyborem.
Nie używaj Fluttera, jeśli chcesz, aby użytkownicy korzystali z narzędzi programistycznych platformy z Twoją aplikacją. Narzędzia dla programistów platform oznaczają tutaj narzędzia specyficzne dla urządzenia, takie jak opcje programisty Androida. Zawiera również narzędzia programistyczne przeglądarki.
Nie używaj Flutter dla sieci, jeśli oczekujesz, że rozszerzenia przeglądarki będą współdziałać z witryną.
Nie używaj też Fluttera do witryn internetowych z dużą ilością treści.
Wnioski
Był to przegląd umiejętności, które przenoszą się z programowania front-endowego do pracy z Flutterem. Omówiliśmy również koncepcje tworzenia aplikacji, których musisz się nauczyć jako programista stron internetowych.
Flutter jest prostszy dla twórców stron internetowych, ponieważ oba wymagają implementacji interfejsów użytkownika. Jeśli uruchomisz Fluttera, przekonasz się, że daje to dobre wrażenia programistyczne. Wypróbuj Fluttera! Używaj go do tworzenia aplikacji mobilnych i oczywiście prezentuj to, co tworzysz.
Twoje zdrowie!
