belajar-flutter-bahasa-indonesia

Belajar Tipe Widget dan User Events Pada Flutter

Tipe Widget

Di dalam Flutter saat kita membuat sebuah widget ada dua tipe yang akan kita gunakan dalam membangun sebuah aplikasi Flutter, yaitu visible widget dan invisible widget.

1. Visible Widget

Visible widget berhubungan dengan user input atau output dan tentunya terlihat di user interface seperti tombol (Button), text, card, appbar dan lainnya.

2. Invisible Widget

Sesuai dengan namanya widget ini tak terlihat oleh user namun sangat dibutuhkan dalam urusan mengatur layout, seperti bagaimana susunan widget tersebut ditampilkan apakah sejajar per baris (row) atau dibuat per kolom (column), susunan daftar (list) dan lainnya.

Container widget

Ada juga widget yang tipenya merupakan invisible widget sekaligus visible widget, karena secara default container widget bertipe invisible namun bisa di styling yang membuatnya bisa terlihat.


Di project sebelumnya kita berhasil menampilkan basic user interface, nah coba lihat lagi di dalam body tersebut, kita sudah membuat satu buah widget text.

 class AplikasiKu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasi ku'),),
      body: Text('ini text dalam body'),
    ),);
  }
}

Pertanyaannya bagaimana caranya kita menambahkan widget lainnya didalam body ?.

Sedangkan di dalam widget body hanya bisa menampung satu buah widget, yang mana sudah kita buat text widget didalamnya.

Disinilah kita akan menggunakan invisible widget dan untuk kasus ini bisa menggunakan Column(kolom) untuk menampilkannya sejajar dari atas ke bawah atau Row(baris) yang digunakan untuk menampilkan widget secara bersebelahan.

Untuk contoh kali ini kita gunakan Column saja dulu seperti berikut

 class Testes extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasi ku'),),
      body: Column(children: [
        Text('ini teks ~'),
        RaisedButton(onPressed: null,child: Text('Tombol 1'),),
        RaisedButton(onPressed: null,child: Text('Tombol 2'),),
        RaisedButton(onPressed: null,child: Text('Tombol 3'),),
      ],)
    ),);
  }
}

Sekali lagi semisal widget yang digunakan sudah banyak, bisa di enter kebawah biar tidak kepanjangan ke samping, secara default di Visual Studio Code bisa diatur otomatis dengan menekan kombinasi tombol di keyboard “Shift+alt+f”.

Tapi balik lagi tiap orang punya kebiasaan yang berbeda ada yang menyamping ada yang kebawah, hanya sekedar saran saja dalam penulisan kode.

Jika coding yang sudah diberi Column tadi kita jalankan maka hasilnya kurang lebih akan seperti ini :

cara-membuat-button-user-events-di-flutter
Membuat tombol di flutter

Terlihat tombol yang kita buat belum bisa di pencet-pencet karena value onPressed yang kita beri masih null, bagaimana kalau kita beri fungsi jika di klik maka jalankan suatu method, kita tambah dan edit lagi codingnya dan keseluruhannya akan seperti ini.

import 'package:flutter/material.dart';

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

class AplikasiKu extends StatelessWidget{
  void cetak(){
    print('Tombol di klik');
  }

  @override
  Widget build(BuildContext context) {   
    return MaterialApp(home: Scaffold(
      appBar: AppBar(title: Text('Aplikasi ku'),),
      body: Column(
        children: [
          Text('ini teks ~'),
          RaisedButton(onPressed: cetak,child: Text('Tombol 1'),),
          RaisedButton(onPressed: ()=> print('Tombol di klik 2'),child: Text('Tombol 2'),),
          RaisedButton(onPressed: () {
            print('Tombol di klik 3');
            //..coding lainnya
            //..
            //..dan seterusnya
          },child: Text('Tombol 3'),),
      ],),
    ),);
  }
}

Jalankan kembali aplikasi dengan coding yang sudah di update.

Dan jika di klik bisa kita lihat di debug consolenya akan memberikan feedback seperti ini :

cara-membuat-button-di-flutter
Hasil setelah tombol di klik

Untuk kali ini kita cukup tampilkan hasil dari klik tombol tersebut di debug console , dari tombol yang kita buat sengaja saya buat berbeda cara pemanggilannya.

  • Tombol 1 secara langsung memanggil method bernama cetak yang ada di atasnya.
  • Tombol 2 istilahnya kita menggunakan Anonymous Function dan isinya hanya single expression bisa disingkat menjadi “()=>”.
  • Tombol 3 sama saja dengan tombol 2 tapi jika expression atau isinya banyak bisa menggunakan kurung kurawal “{ }” yang kemudian tinggal di isi seperti function biasanya.

Anonymous Function biasanya digunakan di tombol/click listener dan cocok digunakan jika method/function hanya diterapkan di satu buah tombol.

Berbeda dengan Named function kita bisa mengimplementasikan method/functionnya di tombol yang diinginkan, jadi tinggal panggil nama methodnya saja (seperti di RaisedButton tombol 1).

Leave a Reply

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