{"id":3746,"date":"2019-11-25T09:40:49","date_gmt":"2019-11-25T08:40:49","guid":{"rendered":"https:\/\/wp-test.itcraft.pl\/pl\/?p=3746"},"modified":"2021-02-08T10:47:18","modified_gmt":"2021-02-08T09:47:18","slug":"pierwsze-kroki-w-tworzeniu-aplikacji-flutter","status":"publish","type":"post","link":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/","title":{"rendered":"Pierwsze kroki w tworzeniu aplikacji Flutter"},"content":{"rendered":"\n<script type=\"application\/ld+json\">\n    {\n      \"@context\": \"http:\/\/schema.org\",\n      \"@type\": \"Blog\",\n      \"name\": \"itCraftapps.com - Mobile App Development Blog\",\n      \"url\": \"https:\/\/itcraftapps.com\/pl\/blog\"\n    }\n  <\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n  \"@type\": \"WebPage\",\n  \"@id\": \"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/\"\n  },\n  \"headline\": \"Pierwsze kroki w tworzeniu aplikacji Flutter\",\n \n    \"image\": [\n{\n\t\n  \"@type\": \"ImageObject\", \n  \"contentUrl\": \"flutter-DART.jpg\",  \"url\":\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/11\/flutter-DART.jpg\",\n  \"description\": \"Pierwsze kroki w tworzeniu aplikacji Flutter \",\n  \"name\": \"Pierwsze kroki w tworzeniu aplikacji Flutter\"\n\n}\n  \n  ],\n  \n  \"datePublished\": \"2019-11-25\",\n  \"dateModified\": \"2021-02-08\",\n  \"author\": {\n  \"@type\": \"Person\",\n  \"name\": \"Pawe\u0142 Czerniewski\",\n  \"jobTitle\": \"Content Writer\",\n  \"description\": \"Creates content.\"\n\n  },\n  \"publisher\": {\n  \"@type\": \"Organization\",\n  \"name\": \"itCraftapps.com\",\n  \"logo\": {\n  \"@type\": \"ImageObject\",\n  \"url\": \"https:\/\/wp-test.itcraft.pl\/wp-content\/uploads\/2019\/04\/placeholder-post.png\"\n  },\n  \"description\": \"itCraftapps.com - Mobile App Development\"\n}}\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Spis tre\u015bci<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#1\">Pierwszy krok \u2013 instalacja<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#2\">Samouczki<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#3\">Pierwsza aplikacja Flutter \u2013 koncepcja<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#4\">Pierwsze kroki<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#5\">Praca z kodem \u2013 analiza przyk\u0142ad\u00f3w<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#6\">Jeden ma\u0142y szczeg\u00f3\u0142<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#7\">Integracja Fabric \/ Crashlytics<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#8\">Uruchamianie ci\u0105g\u0142ej integracji<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#9\">Wzorzec projektowy przyjazny Flutterowi \u2013 dlaczego BLoC?<\/a><\/span><\/li><li><span style=\"text-decoration: underline;\"><a href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#10\">Implementacja<\/a><\/span><\/li><\/ol>\n\n\n\n<br \/>\n\n\n\n<p>Do niedawna <a href=\"https:\/\/itcraftapps.com\/pl\/blog\/19-aplikacji-stworzonych-we-flutterze\/\">Flutter<\/a> by\u0142 tylko kolejn\u0105 nowink\u0105, nowym graczem na rynku wieloplatformowego tworzenia aplikacji. Jako do\u015bwiadczony <a href=\"https:\/\/itcraftapps.com\/pl\/zatrudnij-najlepszych-programistow-ios-do-swojego-projektu\/\">programista iOS<\/a> nie zada\u0142em sobie trudu, \u017ceby si\u0119 nad Flutterem g\u0142\u0119biej pochyli\u0107. Kilka miesi\u0119cy po oficjalnym premierze wydaje si\u0119, \u017ce wszyscy m\u00f3wi\u0105 tylko o Flutterze. \u201eWszystko jest wid\u017cetem\u201d, \u201ePi\u0119kne natywne aplikacje w rekordowym czasie\u201d i kilka innych fraz, da\u0142y nowej ofercie Google marketingowy sukces . Oczywi\u015bcie nasza firma, zawsze na bie\u017c\u0105co z najnowszymi trendami, szybko zareagowa\u0142a i zacz\u0119li\u015bmy pracowa\u0107 nad utworzeniem zespo\u0142u Flutter. Oto podsumowanie mojej pierwszej powa\u017cnej pr\u00f3by u\u017cycia DART i Fluttera &#8211; frameworka opartego na wid\u017cetach.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"1\">Pierwszy krok &#8211; instalacja<\/h2>\n\n\n\n<p>Konfiguracja Flutter na MacOS jest do\u015b\u0107 trywialna, a oficjalna strona <a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\/macos\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Flutter wyja\u015bnia krok po kroku proces instalacji<\/a>. B\u0119d\u0105c programist\u0105 <a href=\"https:\/\/itcraftapps.com\/pl\/blog\/10-najpopularniejszych-pytan-o-swift\/\">Swift<\/a>, mia\u0142em na ju\u017c na pok\u0142adzie narz\u0119dzia Xcode i Xcode command line, dzi\u0119ki czemu proces ten by\u0142 jeszcze szybszy.<\/p>\n\n\n\n<p>Musia\u0142em zainstalowa\u0107 Android Studio (mo\u017cna r\u00f3wnie\u017c u\u017cy\u0107 Visual Studio Code), aby m\u00f3c kodowa\u0107 za pomoc\u0105 Dart &#8211; j\u0119zyka u\u017cywanego w Flutter. Musia\u0142em tak\u017ce doda\u0107 ADB, aby moje pod\u0142\u0105czone urz\u0105dzenia z Androidem by\u0142y widoczne. W przypadku IDE postanowi\u0142em wypr\u00f3bowa\u0107 Android Studio, poniewa\u017c pisa\u0142em kiedy\u015b aplikacje \u201ehello world\u201d dla Androida, wi\u0119c niezale\u017cnie od dotychczasowych zmian \u015brodowisko by\u0142o mi przynajmniej znane.<\/p>\n\n\n\n<p>Podsumowuj\u0105c, konfiguracja zaj\u0119\u0142a mi oko\u0142o dw\u00f3ch godzin, a ja mog\u0142em stworzy\u0107 <a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\/macos#create-and-run-a-simple-flutter-app\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">prosty projekt demonstracyjny Flutter<\/a> i uruchomi\u0107 go na fizycznych urz\u0105dzeniach z Androidem i IOS pod\u0142\u0105czonych do mojego Maca przez USB.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"2\">Samouczki<\/h2>\n\n\n\n<p>Oficjalna strona Flutter jest bogata w pr\u00f3bki kodu dla pocz\u0105tkuj\u0105cych, kt\u00f3re wyja\u015bniaj\u0105, jak powinna wygl\u0105da\u0107 poprawna praca z Dart. Moja pierwsza reakcja by\u0142a troch\u0119 paniczna, poniewa\u017c to, co zobaczy\u0142em, bardzo r\u00f3\u017cni\u0142o si\u0119 od tego, do czego jestem przyzwyczajony. Nie \u201ewyczu\u0142em\u201d kodu, nie by\u0142o na widoku klas, metod ani zmiennych &#8211; jasne, \u017ce tam by\u0142y, ale sk\u0142adnia znacznie r\u00f3\u017cni\u0142a si\u0119 od tego, do czego przywyk\u0142em w Swift. Je\u015bli lubisz patrze\u0107 na nowe j\u0119zyki programowania, przypuszczam, \u017ce wiesz o czym m\u00f3wi\u0119 &#8211; wszystko wydawa\u0142o si\u0119 troch\u0119 dziwne &#8211; inny edytor, inny color coding i oczywi\u015bcie &#8211; zupe\u0142nie inny j\u0119zyk do zrozumienia. Jestem pewien, \u017ce wszystko, czego potrzebuj\u0119, to przyjrze\u0107 si\u0119 Dartowi bli\u017cej, aby uzyska\u0107 lepsze o nim poj\u0119cie.<\/p>\n\n\n\n<p>Podczas czytania \/ wykonywania samouczk\u00f3w nauczy\u0142em si\u0119, jak konfigurowa\u0107 widoki za pomoc\u0105 podstawowych wid\u017cet\u00f3w Flutter &#8211; do umieszczania przycisk\u00f3w i etykiet, otwierania nast\u0119pnego widoku itp. Wszystko odbywa si\u0119 z kodu, wi\u0119c na razie prosty spos\u00f3b na oddzielenie kodu widoku od logiki biznesowej to wci\u0105\u017c na mojej li\u015bcie \u201cdo nauki\u201d.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"3\">Pierwsza aplikacja Flutter &#8211; koncepcja<\/h2>\n\n\n\n<p>Przed rozpocz\u0119ciem pisania projektu konieczne jest przeprowadzenie bada\u0144 dotycz\u0105cych podstaw. Dla pocz\u0105tkuj\u0105cego Flutterowca ilo\u015b\u0107 informacji do zaabsorbowania jest do\u015b\u0107 znacz\u0105ca, ale nie musisz sam sobie radzi\u0107. Szybko rozwijaj\u0105ce si\u0119 Flutter community oferuje du\u017ce wsparcie, a wszystko, czego brakuje na oficjalnej stronie Flutter, mo\u017cesz znale\u017a\u0107 w repozytoriach git, listach b\u0142\u0119d\u00f3w lub <a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Stackoverflow<\/a>. Z ogromnej liczby temat\u00f3w i problem\u00f3w zwi\u0105zanych z Flutter, wida\u0107 ju\u017c spore i stale rosn\u0105ce zainteresowanie Flutter \/ Dart.<\/p>\n\n\n\n<h3 class=\"has-text-align-left wp-block-heading\">Do mojego pierwszego projektu musia\u0142em dowiedzie\u0107 si\u0119 troch\u0119 o:<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>async get\/post<\/li><li>login form<\/li><li>user profile with history<\/li><li>images processing form<\/li><li><a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/stackoverflow.com\/questions\/43813386\/how-to-play-a-custom-sound-in-flutter\" target=\"_blank\">playing sounds<\/a>&nbsp;<\/li><li><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/AlertDialog-class.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">showing alerts<\/a>&nbsp;<\/li><\/ul>\n\n\n\n<p>Z pomoc\u0105 wszystkich wy\u017cej wymienionych \u017ar\u00f3de\u0142, znalezienie informacji by\u0142o do\u015b\u0107 proste<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"4\">Pierwsze kroki<\/h2>\n\n\n\n<p>Tyle do zrobienia i my\u015blenia :). Czas na kolejny krok &#8211; rozpocz\u0119cie podstawowych przygotowa\u0144 do projektu. Po pierwsze &#8211; <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/stackoverflow.com\/questions\/51534616\/how-to-change-package-name-in-flutter\" target=\"_blank\">zmiana nazwy projektu<\/a> &#8211; okaza\u0142o si\u0119, \u017ce nie jest to wielki wysi\u0142ek dzi\u0119ki prostym instrukcjom ze strony Flutter. Wyrazy uznania nale\u017c\u0105 si\u0119 zespo\u0142owi Flutter &#8211; wszyscy wiemy, jak irytuj\u0105ca mo\u017ce by\u0107 zmiana nazwy projektu na r\u00f3\u017cnych platformach. Flutter daje tutaj rad\u0119, poniewa\u017c zmiana nazwy nie jest niczym wielkim. To samo dotyczy <a href=\"https:\/\/stackoverflow.com\/questions\/51534616\/how-to-change-package-name-in-flutter\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">zmiany nazwy pakietu<\/a>, dzi\u0119ki du\u017cej ilo\u015bci informacji, kt\u00f3re mo\u017cna znale\u017a\u0107 online.<\/p>\n\n\n\n<p>Kilka innych rzeczy do rozwa\u017cenia to: Android Manifest, Info.plist in Xcode, setting bundle.using flavours, Signing, Runner.workspace. Ustalanie targetu wdro\u017cenia dla IOS i Androida. Po raz kolejny community i wsparcie Google by\u0142y bardzo pomocne.<\/p>\n\n\n\n<p>To, co wydawa\u0142o mi si\u0119 nieco dziwne we Flutter, to d\u0142uga sk\u0142adnia importu:<\/p>\n\n\n\n<p>import 'package: flutter_demo \/ model \/ user.dart&#8217;;<\/p>\n\n\n\n<p>Preferuj\u0119 kr\u00f3tkie importowanie, najlepiej je\u015bli zawieraj\u0105 one tylko nazw\u0119 pliku. Moje pierwsze wra\u017cenie z DART by\u0142o takie, \u017ce jest do\u015b\u0107 d\u0142ugi. Zamiast opisywa\u0107 prac\u0119 w kilku prostych s\u0142owach, czu\u0142em si\u0119, jakbym opowiada\u0142 szczeg\u00f3\u0142ow\u0105 histori\u0119 o akcji :). Zobacz\u0119, co si\u0119 zmieni, kiedy ju\u017c dobrze wyczuj\u0119 konstrukcje Dart.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"5\">Praca z kodem &#8211; analiza przyk\u0142ad\u00f3w<\/h2>\n\n\n\n<p>Jak m\u0105dra osoba powiedzia\u0142a kiedy\u015b: \u201eNauka j\u0119zyka programowania odbywa si\u0119 w dw\u00f3ch etapach &#8211; nauka czytania kodu, a nast\u0119pnie pisania kodu\u201d, dlatego dobr\u0105 rzecz\u0105 na pocz\u0105tek jest analiza pr\u00f3bek kodu, aby uzyska\u0107 w\u0142a\u015bciwe wyczucie platformy Flutter. Obecno\u015b\u0107 Abstract classes by\u0142a ulg\u0105, poniewa\u017c wiedzia\u0142em, \u017ce b\u0119d\u0119 w stanie wykona\u0107 dziedziczenie i logik\u0119 SWIFT podobn\u0105 do protoko\u0142u.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"6\">Jeden ma\u0142y szczeg\u00f3\u0142<\/h2>\n\n\n\n<p>Twoja aplikacja musi by\u0107 wy\u015bwietlana tylko w wymuszonym widoku pionowym &#8211; \u0142atwo to wykona\u0107, klikaj\u0105c<a href=\"https:\/\/stackoverflow.com\/questions\/49418332\/flutter-how-to-prevent-device-orientation-changes-and-force-portrait?rq=1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\"> ten link<\/a>.<\/p>\n\n\n\n\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"7\">Integracja Fabric \/ Crashlytics<\/h2>\n\n\n\n<p>Trzeba przyzna\u0107, \u017ce tutaj musia\u0142em stoczy\u0107 pierwsz\u0105 powa\u017cn\u0105 bitw\u0119 z Flutter. W przypadku Fabric jeste\u015bmy obecnie w troch\u0119 trudnej sytuacji, jako \u017ce wykupi\u0142 go Google i jest w trakcie integracji z Firebase Crashlytics. Nie by\u0142o dla mnie jasne, kt\u00f3re pakiety powinienem doda\u0107, aby obs\u0142ugiwa\u0107 dystrybucj\u0119 Fabric Beta i raportowanie b\u0142\u0119d\u00f3w Crashlytics. Troch\u0119 dochodzenia w kwestii <a href=\"https:\/\/services.google.com\/fb\/forms\/firebasealphaprogram\/?appDistribution=true\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Firebase Alpha zast\u0119puj\u0105cej Fabric Beta do dystrybucji kompilacji <\/a>jest obiecuj\u0105ca, ale teraz, przy dost\u0119pnej tylko wersji Beta, potrzebny jest hybrydowy dost\u0119p zar\u00f3wno do Fabric, jak i Firebase.<\/p>\n\n\n\n<p>Musia\u0142em utworzy\u0107 jeden projekt Firebase dla aplikacji, stworzy\u0107 aplikacje na iOS i Androida, przenie\u015b\u0107 GoogleService-Info.plist i google-services.json do folder\u00f3w projektu platformy, wykona\u0107 niezb\u0119dne modyfikacje w AndroidManifest.xml, build.gradle itp. Dla Andro doda\u0107 plik Info.plist i AppDelegate.m dla IOS. Nast\u0119pnie zosta\u0142y tylko: poprawny import do pliku main.dart i modyfikacja metody main, aby ostatecznie uruchomi\u0107 Crashlytics.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"8\">Uruchamianie ci\u0105g\u0142ej integracji<\/h2>\n\n\n\n<p>Wszystko to zaj\u0119\u0142o wi\u0119ksz\u0105 cz\u0119\u015b\u0107 dnia, ale ostatecznie moja ci\u0105g\u0142a integracja zosta\u0142a w pe\u0142ni skonfigurowana dla mojego projektu Flutter, z pomoc\u0105 <a href=\"https:\/\/fastlane.tools\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">Fastlane<\/a> dla platform IOS i Android. Nie ma sposobu, aby zrobi\u0107 to bezpo\u015brednio dla Flutter lub stworzy\u0107 jedn\u0105 konfiguracj\u0119 Fastlane dla projektu Flutter do obs\u0142ugi obu platform &#8211; musisz utworzy\u0107 osobne pliki Fastfile dla ka\u017cdej platformy i skonfigurowa\u0107 je niezale\u017cnie. Oto <a rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\" href=\"https:\/\/flutter.dev\/docs\/deployment\/cd\" target=\"_blank\">ca\u0142kiem niez\u0142y samouczek na temat automatyzacji ci\u0105g\u0142ego budowania<\/a>. Zmodyfikowa\u0142em go nieco, aby pozwoli\u0107 kompilacjom przej\u015b\u0107 bezpo\u015brednio do Crashlytics zamiast iTunes lub Google Play.<\/p>\n\n\n\n<p>Konfiguracja powy\u017cszego wymaga troch\u0119 pracy &#8211; radz\u0119 pozosta\u0107 na bie\u017c\u0105co z odpowiednimi wersjami pakiet\u00f3w, poniewa\u017c du\u017co czasu zaj\u0119\u0142o mi znalezienie przyczyny \u201enieoczekiwanych\u201d b\u0142\u0119d\u00f3w kompilacji.<\/p>\n\n\n\n<h3 class=\"has-text-align-left wp-block-heading\">Mia\u0142em te\u017c do czynienia z tym b\u0142\u0119dem dla Androida:<\/h3>\n\n\n\n<p>&gt; java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Nie mo\u017cna scali\u0107 dex<\/p>\n\n\n\n<p>By\u0142o to na szcz\u0119\u015bcie, poniewa\u017c szybkie wyszukiwanie przynios\u0142o rozwi\u0105zanie w postaci <a href=\"https:\/\/github.com\/flutter\/flutter\/issues\/21005\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">dodania multiDexEnabled true do defaultConfig build.gradle<\/a><\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"9\">Wzorzec projektowy przyjazny Flutterowi &#8211; dlaczego BLoC?<\/h2>\n\n\n\n<p>Podobnie jak w przypadku ka\u017cdego projektu, skonfigurowanie odpowiedniej architektury do uruchomienia projektu aplikacji ma najwy\u017cszy priorytet. Sprawdzi\u0142em zar\u00f3wno rekomendacje spo\u0142eczno\u015bciowe, jak i oficjalne, i wynika z nich, \u017ce \u200b\u200bBLoC jest preferowan\u0105 opcj\u0105. Uzna\u0142em ten <a href=\"https:\/\/medium.com\/flutterpub\/architecting-your-flutter-project-bd04e144a8f1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" aria-label=\" (otwiera si\u0119 na nowej zak\u0142adce)\">artyku\u0142 za pomocny w zrozumieniu dzia\u0142ania architektury BLoC<\/a>. Okazuje si\u0119, \u017ce BLoC jest bardzo podobny do MVVC na iOS, z klas\u0105 bloku zamiast modelView. Doszed\u0142em do wniosku, \u017ce architektura BLoC jest w\u0142a\u015bciwym wyborem i postanowi\u0142em pracowa\u0107 z ni\u0105 w moim projekcie.<\/p>\n\n\n\n<p>Przyk\u0142adowa aplikacja z powy\u017cszego artyku\u0142u by\u0142a do\u015b\u0107 podobna do mojego pierwszego projektu aplikacji we Flutterze &#8211; wszystko, czego potrzebowa\u0142em, to dodanie dodatkowej warstwy projektu i oddzielnej zawarto\u015bci dla poszczeg\u00f3lnych modu\u0142\u00f3w. Wystarczy\u0142o rozwin\u0105\u0107 list\u0119 podstawowych folder\u00f3w na wszystkie modu\u0142y (interfejs u\u017cytkownika, bloki, modele, zasoby). Stworzy\u0142em r\u00f3wnie\u017c folder commonModels, w kt\u00f3rym przechowywane s\u0105 wszystkie modele u\u017cywane w r\u00f3\u017cnych modu\u0142ach. Bardziej dog\u0142\u0119bne przeczytanie artyku\u0142u zaowocowa\u0142o kilkoma drobnymi zmianami w kodzie i udoskonaleniem architektury BLoC w moim projekcie.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\" id=\"10\">Implementacja<\/h2>\n\n\n\n<p>Trudny pocz\u0105tek sprawi\u0142, \u017ce naprawd\u0119 ci\u0119\u017cko by\u0142o stworzy\u0107 cokolwiek z kodem DART, co faktycznie by dzia\u0142a\u0142o &#8211; pe\u0142en szacunek dla wszystkich, kt\u00f3rzy z \u0142atwo\u015bci\u0105 przechodz\u0105 na j\u0119zyk Flutter. Dla mnie by\u0142 to powr\u00f3t do szko\u0142y w prawie wszystkich aspektach pisania kodu &#8211; jeden krok do przodu, dwa kroki do ty\u0142u. Wiedzia\u0142em tylko to, czego nauczy\u0142em si\u0119 z samouczk\u00f3w krok po kroku, przyk\u0142ad\u00f3w i test\u00f3w debugowania.<\/p>\n\n\n\n<p>W ko\u0144cu uda\u0142o mi si\u0119 stworzy\u0107 ma\u0142y widget z 5 przyciskami zdefiniowanymi przez wyznaczone w\u0142a\u015bciwo\u015bci modelu &#8211; niezupe\u0142nie wystarczaj\u0105ce aby nazwa\u0107 to aplikacj\u0105. Utworzenie interfejsu u\u017cytkownika te\u017c nie posz\u0142o zbyt dobrze &#8211; nagle DART, i ca\u0142a koncepcja \u017ce \u201ewszystko jest widgetem\u201d zacz\u0119\u0142y przypomina\u0107 JSONa &#8211; tylko bardziej skomplikowanego. Nadal musz\u0119 si\u0119 zapozna\u0107 ze wszystkimi definicjami parametr\u00f3w interfejsu u\u017cytkownika &#8211; kraw\u0119dziami, wymiarami, wyr\u00f3wnaniami itp. &#8211; Planuj\u0119 zabra\u0107 si\u0119 za to, kiedy tylko sko\u0144cz\u0119 pisa\u0107 i analizowa\u0107 kod.<\/p>\n\n\n\n<p>Podsumowuj\u0105c, praca z Flutter by\u0142a dla mnie troch\u0119 trudna, ale widz\u0119, \u017ce ca\u0142y ten szum wok\u00f3\u0142 nowego frameworka Google nie jest bezpodstawny. Po pewnych udoskonaleniach i dog\u0142\u0119bnym poznaniu uwa\u017cam, \u017ce jest to bardzo dobry dodatek do zestawu narz\u0119dzi ka\u017cdego software house-u, a dla mnie \u015bwietny spos\u00f3b na rozszerzenie moich mo\u017cliwo\u015bci jako programisty.<br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8222;image&#8221;: [ { &#8222;@type&#8221;: &#8222;ImageObject&#8221;, &#8222;contentUrl&#8221;: &#8222;flutter-DART.jpg&#8221;, &#8222;url&#8221;:&#8221;https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/11\/flutter-DART.jpg&#8221;, &#8222;description&#8221;: &#8222;Pierwsze kroki w tworzeniu aplikacji Flutter &#8222;, &#8222;name&#8221;: &#8222;Pierwsze kroki w tworzeniu aplikacji Flutter&#8221; } ], &#8222;datePublished&#8221;: &#8222;2019-11-25&#8221;, &#8222;dateModified&#8221;: &#8222;2021-02-08&#8221;, &#8222;author&#8221;: { &#8222;@type&#8221;: &#8222;Person&#8221;, &#8222;name&#8221;: &#8222;Pawe\u0142 Czerniewski&#8221;, &#8222;jobTitle&#8221;: &#8222;Content Writer&#8221;, &#8222;description&#8221;: &#8222;Creates content.&#8221; }, &#8222;publisher&#8221;: { &#8222;@type&#8221;: &#8222;Organization&#8221;, &#8222;name&#8221;: &#8222;itCraftapps.com&#8221;, &#8222;logo&#8221;: { &#8222;@type&#8221;: &#8222;ImageObject&#8221;, &#8222;url&#8221;: &#8222;https:\/\/wp-test.itcraft.pl\/wp-content\/uploads\/2019\/04\/placeholder-post.png&#8221;&hellip;<\/p>\n","protected":false},"author":12,"featured_media":10376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[9,12,5],"tags":[],"class_list":{"0":"post-3746","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-aplikacje-cross-platform","8":"category-flutter-development","9":"category-news"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pierwsze kroki w tworzeniu aplikacji Flutter - itCraft blog<\/title>\n<meta name=\"description\" content=\"Naucz si\u0119 DARTa i stw\u00f3rz swoje pierwsze aplikacje Flutter! Samouczki, przyk\u0142ady kodu i wskaz\u00f3wki dla pocz\u0105tkuj\u0105cych. iOS Tech Lead i Technical Content Writer dziel\u0105 si\u0119 do\u015bwiadczeniami.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pierwsze kroki w tworzeniu aplikacji Flutter - itCraft blog\" \/>\n<meta property=\"og:description\" content=\"Naucz si\u0119 DARTa i stw\u00f3rz swoje pierwsze aplikacje Flutter! Samouczki, przyk\u0142ady kodu i wskaz\u00f3wki dla pocz\u0105tkuj\u0105cych. iOS Tech Lead i Technical Content Writer dziel\u0105 si\u0119 do\u015bwiadczeniami.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"Aplikacje mobilne i webowe dla firm | itCraft\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-25T08:40:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-08T09:47:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/11\/itcraft_header_flutter_apps_google_PL.png\" \/>\n\t<meta property=\"og:image:width\" content=\"831\" \/>\n\t<meta property=\"og:image:height\" content=\"401\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"itcseo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pierwsze kroki w tworzeniu aplikacji Flutter - itCraft blog","description":"Naucz si\u0119 DARTa i stw\u00f3rz swoje pierwsze aplikacje Flutter! Samouczki, przyk\u0142ady kodu i wskaz\u00f3wki dla pocz\u0105tkuj\u0105cych. iOS Tech Lead i Technical Content Writer dziel\u0105 si\u0119 do\u015bwiadczeniami.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/","og_locale":"pl_PL","og_type":"article","og_title":"Pierwsze kroki w tworzeniu aplikacji Flutter - itCraft blog","og_description":"Naucz si\u0119 DARTa i stw\u00f3rz swoje pierwsze aplikacje Flutter! Samouczki, przyk\u0142ady kodu i wskaz\u00f3wki dla pocz\u0105tkuj\u0105cych. iOS Tech Lead i Technical Content Writer dziel\u0105 si\u0119 do\u015bwiadczeniami.","og_url":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/","og_site_name":"Aplikacje mobilne i webowe dla firm | itCraft","article_published_time":"2019-11-25T08:40:49+00:00","article_modified_time":"2021-02-08T09:47:18+00:00","og_image":[{"width":831,"height":401,"url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/11\/itcraft_header_flutter_apps_google_PL.png","type":"image\/png"}],"author":"itcseo","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/","url":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/","name":"Pierwsze kroki w tworzeniu aplikacji Flutter - itCraft blog","isPartOf":{"@id":"https:\/\/itcraftapps.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#primaryimage"},"image":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/11\/itcraft_header_flutter_apps_google_PL.png","datePublished":"2019-11-25T08:40:49+00:00","dateModified":"2021-02-08T09:47:18+00:00","author":{"@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7"},"description":"Naucz si\u0119 DARTa i stw\u00f3rz swoje pierwsze aplikacje Flutter! Samouczki, przyk\u0142ady kodu i wskaz\u00f3wki dla pocz\u0105tkuj\u0105cych. iOS Tech Lead i Technical Content Writer dziel\u0105 si\u0119 do\u015bwiadczeniami.","breadcrumb":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#primaryimage","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/11\/itcraft_header_flutter_apps_google_PL.png","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/11\/itcraft_header_flutter_apps_google_PL.png","width":831,"height":401,"caption":"Pierwsze kroki w tworzeniu aplikacji Flutter"},{"@type":"BreadcrumbList","@id":"https:\/\/itcraftapps.com\/pl\/blog\/pierwsze-kroki-w-tworzeniu-aplikacji-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itcraftapps.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Pierwsze kroki w tworzeniu aplikacji Flutter"}]},{"@type":"WebSite","@id":"https:\/\/itcraftapps.com\/pl\/#website","url":"https:\/\/itcraftapps.com\/pl\/","name":"Aplikacje mobilne i webowe dla firm | itCraft","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itcraftapps.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7","name":"itcseo","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1776968297","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1776968297","caption":"itcseo"},"url":"https:\/\/itcraftapps.com\/pl\/blog\/author\/itcseo\/"}]}},"_links":{"self":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/comments?post=3746"}],"version-history":[{"count":0,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3746\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media\/10376"}],"wp:attachment":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media?parent=3746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/categories?post=3746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/tags?post=3746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}