Flutter #2. Konfiguracja środowiska.

Twórcy Fluttera przygotowali specjalną stronę z wyjaśnieniem krok po kroku, co należy zainstalować oraz w jaki sposób dokonać konfiguracji wszelkich niezbędnych narzędzi. Wystarczy przejść pod adres https://flutter.dev/docs/get-started/install , a następnie wybrać rodzaj systemu, na którym będziecie pracować. Zostaniecie przekierowani na specjalnie przygotowaną tronę z tutorialem, który krok po kroku pokaże Wam co musicie zrobić.

Bazując na źródle, o którym wspomniałem powyżej, zamieszczam spis kroków jakie wykonałem konfigurując narzędzia podczas instalacji Fluttera na Windowsie.

Instalacja Fluttera

1. Wejdź na stronę https://flutter.dev/docs/get-started/install/windows
2. Pobierz paczkę z Flutterem
3. Wypakuj pliki do wybranego miejsca (pamiętaj, aby wypakować pliki do folderu, który nie będzie zgłaszać problemów z uprawnieniami)
4. Edytuj zmienną środowiskową PATH dodając do niej ścieżkę do folderu flutter/bin
5. Wykonaj w konsoli komendę flutter doctor, która sprawdzi poprawność procesu instalacji

Android Studio

Jeżeli nie posiadasz jeszcze zainstalowanego Android Studio komenda flutter doctor na pewno poinformowała Cię o kilku błędach w konfiguracji narzędzi. W takim przypadku pierwszym krokiem jest instalacja Android SDK.

Aby to zrobić:

1. Pobierz i zainstaluj Android Studio.
2. Uruchom Android Studio, a następnie przejdź krok po kroku przez proces konfiguracji. Zainstalujesz w ten sposób najnowsze Android SDK, Android SDK Platform-Tools oraz Android SDK Build-Tools. Wszystkie te elementy są niezbędne do tworzenia aplikacji na platformę Android.

Konfiguracja Android Emulator

Na potrzeby uruchomienia i testowania aplikacji zdecydowałem się na wykorzystanie Android emulatora. Aby móc z niego skorzystać, potrzebujemy wykonać następujące kroki:

1. Uruchom Android Studio. Z listy rozwijanej o nazwie Configure wybierz AVD Manager.
2. W nowo otwartym oknie kliknij na Create Virtual Device.
3. Z listy urządzeń wybierz jedno, które chciałbyś emulować i kliknij Next.
4. Wybierz jaką wersję systemu Android ma posiadać symulowane urządzenie (zalecana wersja > Android 4.1 oraz x86 lub x86_64. Kliknij Next.
5. Zweryfikuj dane konfiguracyjne, a następnie kliknij Finish.
6. Po poprawnym przygotowaniu urządzenia zostanie ono wyświetlone na liście dostępnych wirtualnych urządzeń. Możesz teraz spróbować uruchomić emulator, klikając ikonkę zielonego “play”. Po chwili na ekranie pojawi się widok uruchomionego urządzenia.

Konfiguracja środowiska programistycznego

W tym punkcie twórcy Fluttera dają nam pełną dowolność. Kod możemy pisać nawet w notatniku a uruchamiać za pomocą komend wywoływanych z konsoli. Ja jednak nie chcę być aż takim “hardcore’m” i postanowiłem używać edytora, który towarzyszy mi na co dzień, czyli Visual Code.

Jeżeli chcesz zainstalować ten edytor, możesz go pobrać tutaj.

Konfiguracja Visual Code sprowadza się do zainstalowania odpowiednich wtyczek. W tym celu:

1. Uruchom Visual Code.
2. Wywołaj okno poleceń: View > Command Palette
3. Wpisz install , z pośród wyświetlonych pozycji wybierz Extensions: Install Extensions
4. W polu wyszukiwania pluginów wpisz Flutter
5. Wybierz i zainstaluj pierwszą ze znalezionych pozycji:

Aby zweryfikować poprawność instalacji, ponownie wyświetl okno poleceń ( View > Command Palette), a następnie wpisz doctor. Z dostępnych komend wybierz “Flutter: Run Flutter Doctor“. Jeżeli wszystko zainstalowano i skonfigurowano poprawnie, wykonane polecenie powinno zwrócić wynik podobny do poniższego:

Gratulacje! Konfiguracja zakończona. Czas na uruchomienie testowego projektu.

Hello World!

Wszystko gotowe, aby uruchomić testową aplikację. W tym celu:

1. Uruchom Visual Code.
2. Wywołaj okno poleceń: View > Command Palette
3. Wpisz “flutter”. Z dostępnych pozycji wybierz “Flutter: New project“
4. Podaj nazwę dla projektu i wciśnij Enter
5. Wybierz lokalizację dla plików związanych z projektem
6. Gotowe! Właśnie stworzyliśmy pierwszy projekt aplikacji!

Czas uruchomić aplikację na emulatorze:

1. Kliknij na nazwę urządzenia, która widoczna jest w prawym dolnym pasku VisualCode
2. Z listy dostępnych urządzeń wybierz to, na którym ma zostać uruchomiona aplikacja
3. Kliknij F5 lub wybierz z menu Debug > Start debugging
4. Jeżeli wyświetli się pytanie jakiej platformy chcesz użyć do debuggowania – wybierz “Flutter&Dart“
5. Po chwili uruchomi się emulator i zobaczysz ekran aplikacji:

W tym wpisie przedstawiłem sposób konfiguracji potrzebnych narzędzi oraz uruchomienia pierwszej, testowej aplikacji. W kolejnym artykule postaram się przeanalizować strukturę projektu, omówię poszczególne pliki jakie się tam znajdują oraz przedstawię podstawy dotyczące języka Dart.

Jeżeli macie jakieś pytania dotyczące platformy Flutter, bądź chcecie podzielić się swoimi przemyśleniami na ten temat – zachęcam do komentowania!

A tym czasem, do następnego 🙂