Flutter – tworzenie aplikacji

Dlaczego: Flutter SDK to zestaw narzędzi niezbędny do kompilacji kodu Dart na aplikacje mobilne.

Jak:

• Pobierz najnowszą stabilną wersję Flutter SDK (3.24 lub nowszą) z oficjalnej strony.
• Rozpakuj archiwum w folderze np. C:\src\flutter (unikaj folderu Program Files).
• Dodaj ścieżkę do folderu bin wewnątrz Flutter SDK do systemowej zmiennej PATH.
• Uruchom terminal i wpisz flutter doctor, aby sprawdzić brakujące komponenty.

Warunek ukończenia: Polecenie flutter doctor potwierdza poprawną instalację Flutter SDK.

Dlaczego: Odpowiednie narzędzia przyspieszają pisanie kodu dzięki podpowiedziom i debugowaniu.

Jak:

• Pobierz i zainstaluj Visual Studio Code.
• W menu Extensions (Ctrl+Shift+X) wyszukaj i zainstaluj oficjalne rozszerzenie 'Flutter' (automatycznie zainstaluje też 'Dart').
• Skonfiguruj formatowanie kodu przy zapisie (Settings -> Editor: Format On Save).

Warunek ukończenia: VS Code rozpoznaje pliki .dart i wyświetla ikonę Fluttera w pasku stanu.

Dlaczego: Potrzebujesz wirtualnego urządzenia, aby testować aplikację w czasie rzeczywistym bez podłączania telefonu.

Jak:

• Zainstaluj Android Studio i przez Device Manager stwórz nowe urządzenie wirtualne (np. Pixel 6 z API 34).
• Jeśli pracujesz na macOS, zainstaluj Xcode i uruchom Simulator.
• Alternatywnie: włącz 'Opcje programistyczne' i 'Debugowanie USB' na fizycznym telefonie i podłącz go kablem.

Warunek ukończenia: Wirtualne lub fizyczne urządzenie jest widoczne w VS Code w prawym dolnym rogu.

Dlaczego: Dart jest językiem silnie typowanym, co zapobiega wielu błędom w aplikacjach.

Jak:

• Przećwicz deklarowanie zmiennych: String, int, double, bool oraz var.
• Zrozum mechanizm 'Null Safety' (użycie ? dla typów, które mogą być puste).
• Wykorzystaj DartPad.dev do szybkiego testowania kodu bez instalacji.

Warunek ukończenia: Napisanie skryptu w DartPad, który wykonuje proste operacje matematyczne i tekstowe.

Dlaczego: We Flutterze wszystko jest obiektem (widżetem), więc klasy są kluczowe.

Jak:

• Stwórz klasę z konstruktorem (użyj skróconego zapisu this.pole).
• Naucz się dziedziczenia (extends) oraz implementacji interfejsów.
• Zrozum różnicę między parametrami pozycyjnymi a nazwanymi w funkcjach (użycie {}).

Warunek ukończenia: Stworzenie klasy 'User' z polami imię i wiek oraz metodą wyświetlającą dane.

Dlaczego: Musisz wiedzieć, gdzie pisać kod, a gdzie dodawać zasoby jak zdjęcia.

Jak:

• W terminalu wpisz flutter create moja_pierwsza_apka.
• Otwórz folder w VS Code.
• Zlokalizuj plik lib/main.dart – to serce Twojej aplikacji.
• Folder assets (musisz go stworzyć) służy do przechowywania grafik.

Warunek ukończenia: Pomyślne uruchomienie domyślnej aplikacji 'Counter' na emulatorze.

Dlaczego: To podstawowe klocki służące do rozmieszczania elementów na ekranie.

Jak:

• Użyj Scaffold, aby dodać AppBar (pasek górny) i body (treść).
• Wykorzystaj Column do układania elementów pionowo i Row poziomo.
• Dodaj widżety Text, Icon oraz Image.network.

Warunek ukończenia: Ekran aplikacji wyświetla nagłówek, ikonę i dwa rzędy tekstu.

Dlaczego: Surowe widżety wymagają marginesów i kolorów, aby wyglądały profesjonalnie.

Jak:

• Otocz widżety klasą Padding, aby dodać odstępy.
• Użyj Container z właściwością decoration: BoxDecoration, aby dodać zaokrąglone rogi i cienie.
• Wykorzystaj SizedBox do tworzenia precyzyjnych przerw między elementami.

Warunek ukończenia: Elementy na ekranie nie dotykają krawędzi i mają zdefiniowane kolory tła.

Dlaczego: To najważniejsza koncepcja we Flutterze decydująca o odświeżaniu interfejsu.

Jak:

• Używaj StatelessWidget dla stałych elementów (np. ikona, etykieta).
• Używaj StatefulWidget, gdy dane na ekranie mają się zmieniać (np. licznik, formularz).
• Naucz się wywoływać setState(), aby wymusić przebudowanie widżetu.

Warunek ukończenia: Stworzenie przycisku, który po kliknięciu zmienia kolor tła ekranu.

Dlaczego: Aplikacje mobilne opierają się na interakcji z użytkownikiem.

Jak:

• Dodaj widżet TextField do formularza.
• Użyj TextEditingController, aby pobierać tekst wpisany przez użytkownika.
• Wyświetl wpisany tekst w innym miejscu ekranu w czasie rzeczywistym.

Warunek ukończenia: Użytkownik wpisuje imię, a aplikacja wyświetla powitanie 'Witaj, [Imię]!'.

Dlaczego: Większość aplikacji składa się z wielu podstron.

Jak:

• Stwórz drugi plik .dart z nową klasą widżetu.
• Użyj Navigator.push, aby przejść do nowego ekranu.
• Użyj Navigator.pop, aby wrócić do poprzedniego widoku.

Warunek ukończenia: Kliknięcie przycisku na ekranie głównym przenosi użytkownika do ekranu szczegółów.

Dlaczego: Domyślna ikona Fluttera nie wygląda profesjonalnie.

Jak:

• Użyj darmowego narzędzia online do generowania ikon (np. App Icon Generator).
• Podmień pliki w folderach android/app/src/main/res oraz ios/Runner/Assets.xcassets.
• Zmień label w pliku AndroidManifest.xml (Android) oraz CFBundleName w Info.plist (iOS).

Warunek ukończenia: Po zainstalowaniu na telefonie aplikacja ma własną ikonę i nazwę.

Dlaczego: Musisz wygenerować plik, który można wysłać znajomym lub wrzucić do sklepu.

Jak:

• W terminalu wpisz flutter build apk --release dla Androida.
• Plik wynikowy znajdziesz w build/app/outputs/flutter-apk/app-release.apk.
• Dla iOS wymagane jest posiadanie konta Apple Developer i użycie Xcode.

Warunek ukończenia: Wygenerowanie pliku .apk, który można zainstalować na telefonie z Androidem.