Widget Stateless vs. Stateful
Pahami perbedaan utama antara StatelessWidget dan StatefulWidget, serta pelajari kapan dan cara menggunakan masing-masing untuk membangun UI dinamis.
Widget Stateless vs. Stateful adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Widgets: The Building Blocks
Flutter UIs are built entirely from widgets. Think of them as LEGO bricks! Everything you see on screen – text, buttons, even layout containers — is a widget.
Widgets describe how your app's UI should look given its current configuration and state. There are two main types of widgets you'll encounter:
- StatelessWidget
- StatefulWidget
StatelessWidget: Static UI
A StatelessWidget is a widget that does not change its appearance or behavior over time. Once it's built, it stays the same.
- It doesn't have any internal "state" to manage.
- Its properties are immutable (cannot be changed after creation).
- It's perfect for displaying static content like text, icons, or images that don't need to react to user input or data changes.
Simple StatelessWidget
Here's a basic StatelessWidget that displays a welcome message. Notice how its content is fixed.
Run this code to see a static "Hello, CoddyKit!" message.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Stateless Demo'),
),
body: const Center(
child: Text(
'Hello, CoddyKit!',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}When to Go Stateless
Use a StatelessWidget when:
- The widget's appearance depends only on its own configuration parameters (passed in its constructor).
- It doesn't need to respond to user interactions (like taps) or internal data changes.
- Examples:
Text,Icon,Image,AppBar,Padding,Row,Column.
These widgets are efficient because Flutter doesn't need to rebuild them if their parent changes, unless their properties explicitly change.
StatefulWidget: Dynamic UI
A StatefulWidget is a widget that can change its appearance and behavior over time, reacting to user input or data changes.
- It has internal "state" that can be modified.
- When its state changes, the widget rebuilds to reflect the new state.
- It's perfect for interactive elements like checkboxes, sliders, or dynamic lists.
Updating UI with setState()
To make a StatefulWidget dynamic, you modify its internal state. When the state changes, you must call the setState() method.
Calling setState() tells Flutter that the internal state of this widget has changed, and it needs to rebuild the UI to reflect the new state.
Without setState(), your state might change, but the UI won't update!
Interactive StatefulWidget
Let's build a simple counter app using a StatefulWidget. Tap the button to increment the number.
Observe how setState() is used to update the _counter variable and rebuild the UI.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Stateful Demo'),
),
body: const Center(
child: CounterWidget(),
),
),
);
}
}
class CounterWidget extends StatefulWidget {
const CounterWidget({super.key});
@override
State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0; // This is the mutable state
void _incrementCounter() {
setState(() {
_counter++; // Update state
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Count: $_counter',
style: const TextStyle(fontSize: 32),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: const Text('Increment'),
),
],
);
}
}StatefulWidget's Journey
StatefulWidgets go through a lifecycle. Key moments include:
createState(): Creates the mutable state object.initState(): Called once when the widget is inserted into the widget tree. Good for one-time setup.build(): Called every time the widget needs to display its UI, typically aftersetState().dispose(): Called when the widget is removed from the tree. Good for cleaning up resources.
Understanding these helps manage complex interactions.
Choosing the Right Widget
Here's a quick comparison to help you decide:
- StatelessWidget:
- Immutable properties.
- Doesn't change after creation.
- No internal state.
- Efficient for static content.
- StatefulWidget:
- Mutable state (managed by a `State` object).
- Can change dynamically.
- Responds to user interaction/data.
- Uses
setState()to trigger rebuilds.
Most widgets start as stateless; only make them stateful if they truly need to change dynamically.
Widget Type Challenge
You are building a Flutter app. Which type of widget would you primarily use for a simple icon that, when tapped, changes its color?
Recap: Dynamic vs. Static
Great job! You've learned the fundamental difference between StatelessWidget and StatefulWidget.
- StatelessWidgets are for static UI elements that don't change after they're built.
- StatefulWidgets are for dynamic UI elements that need to react to interactions or data changes, using
setState()to update their appearance.
Choosing the right widget type is crucial for building efficient and maintainable Flutter applications. In the next lesson, we'll dive into basic layout widgets!
Belajar Dart dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Widget Stateless vs. Stateful” gratis?
Ya — teks lengkap “Widget Stateless vs. Stateful” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Widget Stateless vs. Stateful”?
Pahami perbedaan utama antara StatelessWidget dan StatefulWidget, serta pelajari kapan dan cara menggunakan masing-masing untuk membangun UI dinamis. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?
Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Widget Stateless vs. Stateful” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?
Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Widget Stateless vs. Stateful
- Widget Tata Letak Dasar
- Elemen UI Interaktif
- Membangun Daftar yang Dapat Digulir dengan ListView