Saturday, April 20, 2019

Dasar-Dasar Membuat Tampilan Pada Flutter : StatelessWidget dan StatefulWidget

Dasar-Dasar Pembuatan GUI Pada Flutter dengan StatelessWidget dan StatefulWidget : Jika pada artikel-artikel sebelumnya saya sudah membahas seputar perkenalan dengan Flutter dan panduan instalasi framework Flutter dengan Android Studio kali ini saya membahas seputar dasar-dasar utama pembuatan tampilan atau GUI pada sebuah aplikasi Flutter. ketika sobat akan mulai masuk dalam pebuatan tampilan / interface pada framework Flutter maka 2 istilah utama (Class) yang akan sobat jumpai adalah StatelessWidget dan StatefullWidget itu karena tampilan pada Flutter secara umum terdri dari widget-widget yang mana widget-widget itu ditampung pada sebuah Class dari keturunan StatelessWidget atau StatefullWidget.

Pada awalnya mungkin sobat akan sedikit merasa bingung terkait 2 Class tersebut, karena keduanya hampir memiliki method yang sama untuk membangun suatu tampilan di Flutter yaitu pada method Build. Namun, jika sobat perhatikan lebih detail kedua Class tersebut mempunya struktur dan fungsi yang berbeda dimana hal yang paling mencolok adalah cara mendeklarasikanya dan tentunya tujuan serta fungsi utama dari keduanya. Kalau diringkas, bisa saya katakan StatelessWidget untuk membangun widget-widget yang sifatnya (hanya dibaca / readonly) sedangkan StatefulWidget adalah untuk membangun widget-widget yang sifatnya (baca tulis / readwrite).

Untuk lebih memahami perbedaan antara StatelessWidget dan StatefulWidget maka simaklah penjelasan lebih detail terkait StatelessWidget dan StatefulWidget di bawah ini.

StatelessWidget

Jika pada penjelasan sebelumnya sudah saya paparkan bahwa StalessWidget adalah untuk membuat tampilan dimana data-data (properti) yang sifatnya hanya bisa dibaca tanpa bisa dirubah nilainya pada suatu tampilan/halaman Flutter yang akan sobat buat. Apakah sobat sudah terbayang? Jika belum, saya bisa kasih contoh seperti ini :
Pada sebuah pembuatan tampilan aplikasi di Flutter ada kalanya sobat akan membuat suatu halaman yang sifatnya hanya dibaca (readonly) saat tampilan tersebut di-render. Hanya saja kasus tampilan layar/halaman yang bersifat demikian sangatlah jarang, untuk itu bisa dikatakan penggunaan StatelessWidget ini sangat jarang sekali nantinya.

Untuk lebih memperjelas struktur penulisan widget dengan StatelessWidget berikut adalah contoh kode Flutter yang menggunakan StatelessWidget:
class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Eduprog Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: eduprogWidgets(),
    );
  }
  Widget eduprogWidgets(){
    return Scaffold(
          appBar: AppBar(
          title: Text("Latihan"),
      ),
      body: Center(
        child: Text("Welcome to Eduprog"),
      ),
    );
  }
}
Kode di atas adalah contoh pemanfaatn StatelessWidget karena kita tidak menginginkan perubahan data / properti pada widget-widget tersebut. Tampilan utama aplikasi di atas berupa sebuah widget Text dengan posisi ditengah-tengah layar baik secara vertikal maupun horizontal.
StatelessWidget

StatefulWidget

Lazimnya membuat suatu tampilan atau interface pada halaman-halaman (layar) di aplikasi Flutter agar terlihat interaktif maka kita akan melakukan perubahan nilai properti baik berupa properti text atau properti lainya. Untuk membuat widget dengan sifat-sifat tersebut kita harus menggunakan  StatefulWidget yang merupakan kebalikan dari StatelessWidget. Pada StatefulWidget ini memiliki struktur yang lebih komplek dibandingkan StatelessWidget dimana pada StatefulWidget ini kita biasanya menulis 2 Class yaitu Class utama dan Class state nya.
Untuk lebih memperjelas fungsi, kegunaan, dan struktur pembuatan widget dengan StatefulWidget perhatikan contoh kode dibawah ini:
class AnukuBig extends StatefulWidget{
  @override  _AnukuBig createState() => _AnukuBig();
}

class _AnukuBig extends State{
  int _nomor = 0;  //. variable yang akan berubah nilainya (state)  _AnukuBig(){  } //. ini constructor  @override  void initState() {
    super.initState();
  }
  @override  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Eduprog Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: eduprogWidgets(),
    );
  }
  Widget eduprogWidgets(){
    return Scaffold(
      body: Center(
        child: Text("Nomor : " + _nomor.toString()),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: (){
          setState(() {
            _nomor++;
          });
        },
        label: Text('Add'),
        icon: Icon(Icons.add),
      ),
    );
  }
}
Kode di atas adalah contoh penggunaan StatefulWidget untuk pembuatan tampilan pada Flutter, jika sobat perhatikan dengan seksama perbedaan yang mencolok dengan tipe pembuatan widget sebelumnya ada pada jumlah Class yang kita buat, dimana untuk StatefulWidget ini kita membuat 2 Class. Fokusnya ada pada Class kedua yaitu Class state nya (_AnukuBig), karena di sini lah logic dari Class tersebut kita buat. Sedangkan pada Class pertama (AnukuBig) biasanya punya struktur yang statis kecuali kasus-kasus tertentu.

Hasil tampilan dari kode di atas adalah sebuah widget teks ditengah layar dengan tulisan Nomor : 0, lalu ada sebuah tombol (floatingActionButton), setiap tombol tersebut ditekan maka hitungan nomor akan bertambah (misal 1,2,3,4,5,6, dst).

Hal lain yang perlu amat sangat sobat perhatikan pada pembuatan 2 nama Class pada StatefulWidget adalah memiliki nama yang hampir sama, hanya saja pada Class state nya, kita menambahkan tanda garis bawah (_) di depan nama Class tersebut. Hal ini tidak wajib, namun disunahkan karena untuk menandakan bahwa kedua Class tersebut memiliki hubungan erat walaupun ditulis terpisah.
StatefulWidget
StatefulWidget dan StatelessWidget adalah 2 Class penting dalam Flutter yang akan sering sobat temui ketika sobat memulai belajar membuat tampilan dengan Flutter. Untuk itu pahami terlebih dahulu kedua Class tersebut dengan baik, dan perbanyak latihan sehingga akan lebih memudahkan sobat dalam belajar Flutter.
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: