Na co dzień zajmuję się tworzeniem aplikacji internetowych, ale od dłuższego czasu chciałem spróbować czegoś nowego, odmiennego, co zaszczepiłoby we mnie chęć do nauki. Tak trafiłem na multiplatformowe rozwiązanie dla tworzenia aplikacji mobilnych, jakim jest Flutter. “Od zera do flutter bohatera” to seria wpisów, które powstają podczas mojej nauki tworzenia aplikacji z użyciem tej platformy.
W poprzednim wpisie pokazałem jak można wygenerować testowy projekt. Wynikiem tej operacji jest stworzenie katalogu w którym znajdziemy szereg plików i folderów. W tym wpisie postaram się przybliżyć jaka jest rola poszczególnych elementów. Do czego służą wygenerowane pliki i foldery.
Na powyższym obrazku widać strukturę projektu o nazwie my_app.
Folder .idea
Jeżeli tak jak ja pracujesz w Visual Studio Code, to ten folder nie będzie mieć dla Ciebie większego znaczenia. Znajdują się tu pliki dotyczące konfiguracji projektu dla Android Studio. Osoby pracujące w tym środowisku odsyłam do strony: https://rider-support.jetbrains.com/hc/en-us/articles/207097529-What-is-the-idea-folder- Można na niej znaleźć wyjaśnienie roli poszczególnych plików w tym folderze.
Folder android/ios
W większości przypadków nie będziemy w nim nic edytować, ale jest to dość istotny katalog. Należy wiedzieć, że zawiera on kompletny, gotowy do użycia projekt natywnej aplikacji dedykowanej platformie Android/iOS. Można powiedzieć, że kod, który tworzymy we Flutterze będzie wstrzyknięty właśnie do tego projektu, a następnie zostanie on skompilowany i przygotowany do uruchomienia na przykład na wybranym przez nas emulatorze.
Folder build
Zawartość tego katalogu generowana jest automatycznie przez Flutter SDK. Dzieje się to podczas procesu budowania naszej aplikacji. W tym folderze pojawią się pliki wynikowe procesu kompilacji aplikacji tworzonej we Flutterze. Sami nie musimy nic tutaj zmieniać.
Folder lib
Z punktu dewelopera tworzącego elementy aplikacji to najważniejszy z katalogów. Tutaj będziemy zamieszczać 99% pracy związanej z pisaniem aplikacji we Flutterze. Tutaj dodaje się wszystkie pliki Dart definiujące tworzoną logikę.
Ostatnim z folderów na jaki warto zwrócić uwagę jest katalog o nazwie test. To miejsce na warstwę testów automatycznych tworzonej aplikacji. O samych testach wspomnę w dalszej części tej serii wpisów.
Pliki
Przyjrzyjmy się teraz plikom, które znaleźć można w katalogu głównym naszego projektu. Po pierwsze – .gitignore. Jest to plik tekstowy zawierający listę plików/folderów/rozszerzeń, które mają zostać pominięte przez repozytorium Git (Więcej informacji o .gitignore znajdziesz tutaj).
Następnym plikiem jest .metadata. Jego treścią zarządza automatycznie Flutter SDK. Są tu zapisywane różne dane pozwalające prawidłowo skompilować aplikację.
Podobnie jest z plikiem .packages . Flutter zarządza jego treścią. Jest on wykorzystywany do przechowania informacji o zależnościach i pakietach użytych w aplikacji.
Kolejnym plikiem jaki można znaleźć w katalogu naszego projektu jest my_app.iml. Nazwa pliku zawsze odpowiada nazwie naszego projektu. Sam plik jest generowany oraz edytowany automatycznie przez Flutter SDK. Jest w nim zawarta konfiguracja naszej aplikacji oraz różne wewnętrzne zależności.
Ostatnim plikiem , na który chciałbym zwrócić uwagę a jednoczenie plikiem, który będziemy często edytować jest pubspec.yaml . To plik konfiguracyjny pozwalający nam zdefiniować m.in:
- nazwę, opis, wersję projektu
- zewnętrzne zależności (jeżeli dodamy do tego pliku nazwę pakietu Flutter, którego zechcemy użyć, Flutter SDK na podstawie tego pliku automatycznie zadba o to, by ten pakiet pobrać dodać i skonfigurować)
- statyczne zasoby (np obrazki, czcionki), które wykorzystujemy w projekcie
Podsumowanie
Generowanie projektu za pomocą CLI lub Visual Studio skutkuje stworzeniem folderu projektu, który zawiera szereg katalogów i plików. Z punktu widzenia osoby początkującej najważniejszymi elementami jest katalog lib oraz plik pubspec.yaml. We wspomnianym katalogu zamieszczone będą wszystkie pliki dart, które stworzą aplikację, natomiast plik o rozszerzeniu yaml zawierać będzie dane kofiguracyjne tworzonego projektu.
W kolejnym wpisie skupimy się na przeanalizowaniu wygenerowanego automatycznie pliku dart oraz spróbuję stworzyć i wyjaśnić od podstaw plik main.
