Tutorial Flutter StatelessWidget dan StatefulWidget Lengkap

Flutter statelesswidget and statefulwidget
Flutter statelesswidget and statefulwidget
Codingtive.com - Flutter widget dibangun dengan menggunakan modern framework yang terinspirasi dari React, dan ide utamanya yaitu semua komponen dalam Flutter adalah widget. Widget menjelaskan bagaimana suatu komponen yang terlihat dan bagaimana state atau kondisinya.

Banyak macam-macam widget yang ada pada Flutter, namun utamanya dibagi menjadi 2, yaitu :
StatelessWidget : widget yang tidak memiliki state, atau kondisinya tidak berubah-ubah. Contohnya ketika menampilkan gambar, text, maupun widget lainnya dan tidak ada perubahan atau tetap.

StatefulWidget : widget yang memiliki state yang dapat berubah-ubah. Contohnya yaitu ketika ada tombol di klik akan mengubah komponen lain. Untuk dapat menggunakan StatefulWidget kamu membutuhkan 2 class yaitu class yang mewarisi / extends ke StatefulWidget dan class yang extends ke State.

Untuk mempelajari lebih dalam bagaimana perbedaannya, mari kita coba untuk mengimplementasikan kodenya. Ikuti langkah-langkahnya sampai selesai ya.

1. Buat project flutter

Pertama, buatlah project baru atau kamu dapat menggunakan project yang sudah ada. Pastikan ketika pertama kali membuat project, laptop terkoneksi dengan internet dan tunggu sampai proses sinkronisasi selesai.

2. Membuat StatelessWidget

Seperti yang sudah dijelaskan sebelumnya, StatelessWidget tidak memiliki state sehingga kondisinya selalu tetap. Contohnya kita akan membuat tampilan untuk menampilkan Text dan Button namun tidak ada perubahan kondisi.

Buka file main.dart pada folder lib, dan ganti kodenya menjadi seperti berikut :
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter Widget",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("StatelessWidget"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
                "This is StatelessWidget",
            ),
            Padding(
                padding: EdgeInsets.only(bottom: 10.0),
            ),
            MaterialButton(
              onPressed: (){},
              color: Colors.blueAccent,
              child: Text(
                "Click Me",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Sekarang coba jalankan dengan emulator atau device, hasilnya seperti berikut :
Tutorial statelesswidget
Tutorial statelesswidget
Kita lihat bahwa tidak ada perubahan atau kondisi yang berubah didalamnya, inilah konsep StatelessWidget. Lalu bagaimana caranya supaya ada state yang berubah ? Caranya yaitu menggunakan StatefulWidget.

3. Membuat StatefulWidget

Untuk menggunakan StatefulWidget, kita perlu membuat 2 class. Ubah semua kode pada file main.dart menjadi seperti berikut :
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter Widget",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  String statusClicked;

  @override
  void initState() {
    super.initState();
    statusClicked = "off";
  }

  void onClickButton() {
    setState(() {
      statusClicked == "on" ? statusClicked = "off" : statusClicked = "on";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("StatefulWidget"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Status clicked is $statusClicked"),
            Padding(
              padding: EdgeInsets.only(bottom: 10.0),
            ),
            MaterialButton(
              color: statusClicked == "on" ? Colors.blue : Colors.red,
              textColor: Colors.white,
              onPressed: () {
                onClickButton();
              },
              child: Text(statusClicked == "on" ? "ON" : "OFF"),
            ),
          ],
        ),
      ),
    );
  }
}
Sekarang coba jalankan, hasilnya seperti berikut :
tutorial flutter statefulwidget
tutorial flutter statefulwidget

flutter statefulwidget
flutter statefulwidget
Kita lihat, ketika tombol di klik ada perubahan kondisi dan tampilan didalamnya, inilah yang dinamakan StatefulWidget.

Source code 

Untuk source code lengkap latihan StatelessWidget dan StatefulWidget, kamu dapat mempelajarinya di repository berikut :

Kesimpulan

Ketika membuat tampilan yang kondisinya selalu tetap maka gunakan StatelessWidget, tetapi jika didalamnya terdapat perubahan state maka gunakan StatefulWidget. Selanjutnya kamu dapat mempelajari widget lainnya atau kamu dapat mengikuti artikel berikut untuk meningkatkan skill kamu.

Pelajari juga :

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter StatelessWidget dan StatefulWidget Lengkap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel