Wzorce rozwoju Flutter

Przyspiesz rozwój Flutter z Cursor i Claude Code. Te wzorce obejmują tworzenie widgetów, zarządzanie stanem, integrację platform i unikalne funkcje, które czynią Flutter potężnym wyborem dla rozwoju cross-platform.

Szybka konfiguracja projektów Flutter

Inicjalizacja Flutter z AI

Cursor
Claude Code

Otwórz Cursor w swoim workspace
Uruchom tryb Agent (Cmd/Ctrl + I)
Prompt: “Stwórz nową aplikację Flutter z:
- Designem Material 3
- Zarządzaniem stanu Riverpod
- Nawigacją Go_router
- Dio do networkingu
- Freezed dla klas danych”
Pozwól agentowi obsłużyć Flutter CLI i konfigurację pakietów

Otwórz terminal w Claude Code
Uruchom: claude "Ustaw projekt Flutter z czystą architekturą"
Claude stworzy strukturę folderów i zależności
Przejrzyj wygenerowaną architekturę

Stateless Widget
Stateful Widget

// Cursor prompt dla niestandardowych widgetów:
"Stwórz widget CustomCard, który:
- Przyjmuje title, subtitle i leading icon
- Ma Material 3 elevation i theming
- Wspiera callback onTap
- Zawiera wsparcie hero animation"

// Agent generuje:
import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  final String title;
  final String? subtitle;
  final IconData? leadingIcon;
  final VoidCallback? onTap;
  final String? heroTag;

  const CustomCard({
    super.key,
    required this.title,
    this.subtitle,
    this.leadingIcon,
    this.onTap,
    this.heroTag,
  });

  @override
  Widget build(BuildContext context) {
    // Implementacja z Material 3 theming
  }
}

// Prompt: "Stwórz widget AnimatedCounter z:
// - Płynnymi przejściami liczb
// - Konfigurowalnym czasem trwania
// - Wsparciem formatowania liczb
// - Funkcjami dostępności"

Wzorce zarządzania stanem

Konfiguracja Riverpod

// Cursor Agent prompt:
"Ustaw Riverpod z:
1. Providerem stanu autoryzacji
2. Providerem profilu użytkownika z async loading
3. Providerem trybu motywu
4. Providerem preferencji językowych
Uwzględnij właściwą obsługę błędów i stany ładowania"

Zaawansowane wzorce Riverpod

Providery Async

// Prompt: "Stwórz async provider dla danych użytkownika z:
// - Cachingiem
// - Możliwością odświeżania
// - Odzyskiwaniem błędów
// - Modyfikatorem Family dla parametrów"

State Notifiers

// Prompt: "Zaimplementuj koszyk zakupowy z:
// - Dodawaniem/usuwaniem elementów
// - Aktualizacjami ilości
// - Obliczaniem ceny
// - Trwałością"

Wzorce nawigacji

Konfiguracja Go_router

// Kompleksowy prompt nawigacji:
"Zaimplementuj go_router z:
- Zagnieżdżoną nawigacją
- Strażnikami autoryzacji
- Deep linking
- Wsparciem URL-i web
- Niestandardowymi przejściami
- Obsługą błędów"

// Cursor wygeneruje:
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
      routes: [
        GoRoute(
          path: 'details/:id',
          builder: (context, state) {
            final id = state.pathParameters['id']!;
            return DetailsPage(id: id);
          },
        ),
      ],
    ),
  ],
);

// Prompt: "Dodaj przepływ autoryzacji z:
// - Przekierowaniem logowania
// - Chronionymi trasami
// - Obsługą refresh token"

Wzorce UI/UX

Responsywny design

// Cursor prompt dla responsywnych layoutów:
"Stwórz responsywny dashboard, który:
- Używa LayoutBuilder dla breakpointów
- Adaptuje nawigację (drawer vs rail vs bottom nav)
- Responsywny layout siatki
- Zachowuje stan podczas zmian layoutu"

Niestandardowe motywy

Generuj motyw: “Stwórz motyw Material 3 z niestandardowym schematem kolorów”
Dodaj tryb ciemny: “Zaimplementuj tryb ciemny z wykrywaniem preferencji systemu”
Komponenty niestandardowe: “Stylizuj wszystkie komponenty Material zgodnie z marką”
Dynamiczne themowanie: “Dodaj przełączanie motywów w runtime z trwałością”

Integracja platform

Funkcje natywne

Integracja kamery
Usługi lokalizacji

// Cursor Agent prompt:
"Zaimplementuj funkcję kamery z:
- Przechwytywaniem zdjęć
- Nagrywaniem wideo
- Pickerem galerii
- Kompresją obrazów
- Uprawnieniami iOS/Android"

// Prompt: "Dodaj śledzenie lokalizacji z:
// - Aktualną pozycją
// - Aktualizacjami w tle
// - Geofencing
// - Optymalizacją baterii"

Wzorce testowania

// Kompleksowe generowanie testów:
"Napisz testy widgetów dla CustomCard w tym:
- Testy Golden dla regresji wizualnej
- Testy interakcji (tap, long press)
- Testy dostępności
- Testy wariantów motywu
- Testy stanu błędu"

Testowanie integracyjne

Konfiguracja: “Skonfiguruj pakiet integration_test”
Pisz testy: “Stwórz test end-to-end dla onboardingu użytkownika”
Integracja CI: “Dodaj testy integracyjne do GitHub Actions”

Optymalizacja wydajności

Optymalizacja buildowania

Wydajność wspomagana AI

Cursor/Claude może pomóc z:

Użyciem konstruktorów const
Optymalizacją przebudowy widgetów
Strategiami cachowania obrazów
Implementacją lazy loading
Wykrywaniem wycieków pamięci

Wzorce profilowania

// Prompt monitorowania wydajności:
"Dodaj śledzenie wydajności dla:
- Czasów budowania widgetów
- Metryki renderowania klatek
- Użycia pamięci
- Czasu trwania requestów sieciowych
- Uwzględnij integrację DevTools"

Dane i networking

Integracja API

// Cursor prompt dla konfiguracji API:
"Stwórz serwis API z Dio, który zawiera:
- Interceptory dla tokenów autoryzacji
- Logowanie request/response
- Obsługę błędów z retry
- Kolejkę offline
- Modele typebezpieczne z Freezed"

Lokalne przechowywanie

SharedPreferences
SQLite

// Prompt prostego przechowywania:
"Stwórz serwis ustawień z:
- Kluczami preferencji typebezpiecznymi
// - Wsparciem migracji
// - Wartościami domyślnymi
// - Aktualizacjami Stream"

// Prompt bazy danych:
"Zaimplementuj SQLite z Drift dla:
- Przechowywania danych użytkownika
- Wyszukiwania pełnotekstowego
- Migracji
- Zapytań reaktywnych"

Wzorce architektury

Czysta architektura

// Kompleksowy prompt architektury:
"Ustaw czystą architekturę z:
- Warstwą domeny (entities, use cases)
- Warstwą danych (repositories, data sources)
- Warstwą prezentacji (pages, view models)
- Dependency injection z get_it
- Strategią obsługi błędów"

Popularne przepisy

Przepływ autoryzacji

// Kompleksowa implementacja autoryzacji:
"Zaimplementuj autoryzację z:
1. Logowaniem email/hasło
2. Logowaniem społecznościowym (Google, Apple)
3. Autoryzacją biometryczną
4. Zarządzaniem sesją
5. Auto-wylogowaniem przy bezczynności"

Nieskończone przewijanie

// Wzorzec paginacji:
"Stwórz listę z nieskończonym przewijaniem z:
- Lazy loading
- Pull to refresh
- Obsługą stanu błędu
- Wskaźnikami ładowania
- Stanem pustym
- Efektywnością sieci"

Obsługa formularzy

Stwórz formularz: “Zbuduj wieloetapowy formularz z walidacją”
Dodaj walidację: “Zaimplementuj walidację w czasie rzeczywistym i przy submit”
Obsługa błędów: “Pokaż błędy inline z dostępnością”
Zarządzanie stanem: “Utrzymuj stan formularza między restartami aplikacji”

Przepływy debugowania

Integracja DevTools

// Prompt konfiguracji debugowania:
"Skonfiguruj Flutter DevTools z:
- Niestandardowymi właściwościami inspector
- Nakładkami wydajności
- Markerami profilowania pamięci
- Debugowaniem sieci
- Podpowiedziami optymalizacji drzewa widgetów"

Obsługa błędów

Kompleksowa strategia błędów

AI może zaimplementować:

Globalne granice błędów
Raportowanie crashy (Sentry/Firebase)
Przyjazne ekrany błędów
Mechanizmy odzyskiwania
Zachowanie debug vs release

Wzorce wdrażania

Konfiguracja buildowania

Android
iOS

# Cursor prompt: "Skonfiguruj build Android z:
# - Podpisywaniem aplikacji
# - Regułami ProGuard
# - Wsparciem Multi-APK
# - Metadanymi Play Store"

# Prompt: "Ustaw build iOS z:
# - Code signing
# - App Store Connect
# - Dystrybucją TestFlight
# - Wsparciem App clips"

Najlepsze praktyki z AI

Efektywne prompty Flutter

// Strukturyzuj swoje prompty tak:
"Stwórz [typ widgetu], który:
- Przestrzega wytycznych Material 3
- Wspiera [specyficzne funkcje]
- Obsługuje [przypadki brzegowe]
- Zawiera [kod specyficzny dla platformy]
- Ma kompleksową dokumentację"

Wskazówki generowania kodu

Zaawansowane wzorce

Niestandardowi malarze

// Prompt złożonego UI:
"Stwórz niestandardowego malarza dla:
- Animowanego tła fal
- Efektu gradient mesh
- Responsywnego na motyw
- Zoptymalizowanego pod kątem wydajności
- Z konfigurowalnymi parametrami"

Kanały platform

// Prompt integracji natywnej:
"Zaimplementuj kanał platformy dla:
- Integracji iOS HealthKit
- Android Health Connect
- Komunikacji typebezpiecznej
- Obsługi błędów
- Mock implementacji do testów"

Następne kroki

Spróbuj wzorców Expo dla React Native
Eksploruj integrację Backend dla rozwoju API
Ucz się strategii testowania dla kompleksowego pokrycia