belajar-flutter-bahasa-indonesia

Belajar Apa itu Stateless dan stateful Widgets Pada Flutter

State

Sebelum dimulai mari kita lihat-lihat dulu sedikit tentang state, dan menurut Wikipedia state adalah.

In information technology and computer science, a system is described as stateful if it is designed to remember preceding events or user interactions, the remembered information is called the state of the system. –Wikipedia

Dari yang bisa kita tangkap state adalah dimana program akan mengingat sebuah proses, interaksi atau informasi/data.

Mungkin kalau dipersempit artiannya, state dibutuhkan jika kita ingin mengingat sesuatu dan dalam hal komputer mungkin saja berupa data/informasi, proses dan lainnya.


Dari project di artikel sebelumnya atau dimanapun itu, kita sering melihat keyword “StatelessWidget” dan juga “StatelesWidget” dalam pembuatan sebuah widget, nah apa sih perbedaan dari keduanya?

StatelessWidget

Sederhananya StatelessWidget sejak pertama aplikasi di build statenya tidak akan berubah dan bisa dibilang widget yang tidak berubah (immutable).

Contohnya jika kita ingin membuat sebuah text widget dengan kata-kata yang sudah kita tetapkan misalnya saja kata ucapan “selamat datang” dan tidak berencana merubahnya juga tidak ada satupun fungsi atau method yang di atur untuk merubah kata tersebut maka StatelessWidget cocok digunakan.

class MyAplikasi extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasiku'),),
      body: Text('Selamat datang'),
    ),
    );
  }
}

Jika kalian menggunakan editor Visual Studio Code bisa digenerate otomatis dengan mengetikkan kata pintasan “ stl “.

StatefulWidget

Kebalikannya StatefulWidget merupakan widget yang dapat berubah-ubah (mutable) secara dinamis.

Kalau kalian ingat saat kita membuat project Flutter pertama kali secara default aplikasi apa yang tampil ?

Yap, aplikasi sederhana yang menampilkan text widget berupa angka yang akan berubah nilainya setiap kali kita menekan tombol.

Seperti contoh tersebut StatefulWidget bisa kita gunakan, karena state nya akan berubah.

Jika kalian menggunakan editor Visual Studio Code bisa digenerate otomatis dengan mengetikkan kata pintasan “ stf “.


Berikut ini contoh ketika kita menggunakan StatefulWidget

import 'package:flutter/material.dart';

void main(){
  runApp(AplikasiKu());
}

class AplikasiKu extends StatefulWidget {
  @override
  _AplikasiKuState createState() => _AplikasiKuState();
}

class _AplikasiKuState extends State<AplikasiKu> {
var nomerIndex = 0;

void ubahIndex(){
  setState(() {
    nomerIndex = nomerIndex+1;
  });
  print(nomerIndex); //untuk melihat di debug console
}

  @override
  Widget build(BuildContext context) {  
  var isitext = [
    'ini adalah text pertama',
    'ini adalah text kedua',
  ];  

    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasi ku'),),
      body: Column(
        children: [
          Text(isitext[nomerIndex]),
          RaisedButton(onPressed: ubahIndex,child: Text('Tombol 1'),),
      ],),
    ),);
  }
}

Poin dari StatefulWidget ini bisa terlihat pada keyword “setState()” ibaratnya dengan keyword tersebut kita memberi tahu bahwa oh ini loh data yang berubah tolong di load lagi.

Tapi coding di atas kalau kita pencet terus tombolnya muncul error seperti ini

contoh-belajar-apa-itu-stateless-dan-stateful-widgets-pada-flutter
Error diluar dari nomer index

Ini terjadi karena daftar list isitext yang kita buat hanya berisikan dua buah value yang mana nomer indexnya berakhir di anga 1 (array/list dsb selalu diawali dari 0), sedangkan dari tombol yang kita buat terus menerus meng-generate nomer index.

Sebenarnya kalau sekedar ingin merubah sesuatu tidak harus menggunakan list/array, dalam contoh ini sekedar sharing saja kalau kedepannya ingin menggunakan list nantinya akan menemui hal seperti ini.

Solusi sederhana dari error ini bisa kita tambahkan if statement di method tersebut dan kita berikan feedback sesuai keinginan, disini kita akan tampilkan widget text baru saja agar mudah, coding lengkapnya seperti berikut.

import 'package:flutter/material.dart';

void main(){
  runApp(AplikasiKu());
}

class AplikasiKu extends StatefulWidget {
  @override
  _AplikasiKuState createState() => _AplikasiKuState();
}

class _AplikasiKuState extends State<AplikasiKu> {
var nomerIndex = 0;
var kata = '';

void ubahIndex(){

if (nomerIndex >=1) {
  setState(() {
    kata = 'selesai';
  });
}else{
  setState(() {
    nomerIndex = nomerIndex+1;
  });
}  
  print(nomerIndex);
}

  @override
  Widget build(BuildContext context) {  
    var isitext = [
    'ini adalah text pertama',
    'ini adalah text kedua',
  ];  

    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasi ku'),),
      body: Column(
        children: [
          Text(isitext[nomerIndex]),
          Text(kata),
          RaisedButton(onPressed: ubahIndex,child: Text('Tombol 1'),),
      ],),
    ),);
  }
}

Hasilnya kurang lebih seperti ini

contoh-stateless-dan-stateful-widgets-pada-flutter
Error sudah digantikan oleh text widget baru

Leave a Reply

Your email address will not be published. Required fields are marked *