Warsztaty i wykłady z oprogramowania
Samouczki i rozwój oprogramowania => Flutter => Wątek zaczęty przez: TehekCom w Gru 23, 2025, 09:54 AM
Flutter to otwartoźródłowy framework UI rozwijany przez Google, który umożliwia tworzenie aplikacji na Androida, iOS, web i desktop z jednej bazy kodu. Najbardziej podstawowym elementem Fluttera są widgety. Wszystko jest widgetem: przyciski, teksty, układy, a nawet sama aplikacja. W tym artykule szczegółowo omówimy dwa najczęściej używane typy widgetów w Flutterze – StatelessWidget i StatefulWidget – oraz wyjaśnimy ich różnice na przykładach.Czym jest widget?W Flutterze widgety to bloki budulcowe interfejsu użytkownika. Są one niezmienne (immutable), co oznacza, że przy każdej zmianie tworzony jest nowy widget. Widgety tworzą strukturę drzewiastą (tree), która jest efektywnie odświeżana (rebuild) w razie potrzeby, zapewniając wysoką wydajność.StatelessWidgetStatelessWidget to widgety bez stanu (state), czyli takie, które nie zmieniają się w czasie. Renderują się wyłącznie na podstawie otrzymanych danych (parametrów).Kiedy używać?Do stałych treści: logo, nagłówki, ikony, stałe teksty.Przykład: Prosta aplikacja "Witaj Świecie".Ten widget nigdy się nie zmienia. Nawet przy ponownym renderowaniu wygląda tak samo.StatefulWidgetStatefulWidget to widgety posiadające stan, który może się zmieniać w czasie. Zawierają obiekt State, a gdy stan się zmieni, widget jest odświeżany.Kiedy używać?Do interakcji użytkownika, animacji, wejść formularzy, liczników i innych zmieniających się danych.Przykład: Prosta aplikacja z licznikiem.import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int sayac = 0;
void arttir() {
setState(() {
sayac++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Stateful Przykład")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Licznik: $sayac",
style: const TextStyle(fontSize: 32),
),
ElevatedButton(
onPressed: arttir,
child: const Text("Zwiększ"),
),
],
),
),
),
);
}
}Tutaj wywołanie setState() aktualizuje stan i powoduje odświeżenie drzewa widgetów.Stateless vs Stateful: Porównanie- Cecha: Stan (State). StatelessWidget: Brak. StatefulWidget: Obecny.
- Cecha: Zmienność. StatelessWidget: Niezmienny (immutable). StatefulWidget: Może się zmieniać w czasie.
- Cecha: Odświeżanie. StatelessWidget: Tylko gdy zmieni się rodzic. StatefulWidget: Przy wywołaniu setState().
- Cecha: Wydajność. StatelessWidget: Szybszy (lekki). StatefulWidget: Nieco cięższy (zarządzanie stanem).
- Cecha: Przykłady użycia. StatelessWidget: Stały tekst, ikona, obraz. StatefulWidget: Formularz, animacja, licznik, aktualizacja listy.
- Cecha: Tworzenie. StatelessWidget: Jedna klasa (metoda build). StatefulWidget: Dwie klasy (widget + state).
Najlepsze praktyki- Używaj StatelessWidget jak najczęściej (dla wydajności).
- Zarządzaj stanem tylko wtedy, gdy jest to konieczne. Unikaj niepotrzebnego tworzenia stanów.
- W bardziej złożonych aplikacjach używaj rozwiązań do zarządzania stanem, takich jak Provider, Riverpod czy Bloc.
- Trzymaj widgety małe i wielokrotnego użytku.
WniosekZrozumienie różnic między widgetami Stateless i Stateful w Flutterze pozwala na podejmowanie właściwych decyzji architektonicznych. W początkowych projektach zacznij od Stateless, a gdy potrzeba zmian, przejdź do Stateful. Ta podstawowa wiedza pomoże ci tworzyć solidne i wydajne aplikacje.Aby poćwiczyć, spróbuj napisać prostą aplikację z listą TODO!Czekam na Twoje pytania w komentarzach.