Belajar Dart Flutter : Membuat Widget Button dan Menyesuaikan Tampilannya - Karena Belajar

 

Kali ini kita akan mengimplementasikan suatu widget yaitu widget button dan menyesuaikan tampilannya menggunakan aplikasi Visual Code Studio dengan bahasa pemrograman Dart

Struktur Pada Flutter

Dalam struktur flutter hampir sama dengan bahasa pemrograman lainnya bahwa komponen widget berada di dalam body, appbar adalah judul atau header aplikasi scaffold berfungsi sebagai pemisah antara layout satu dengan lainnya.

Bisa kita lihat contoh kode gambar di atas kode tersebut untuk menjalankan program sederhana hello world yang sesuai struktur flutter yang menghasilkan tampilan seperti gambar dibawah

Jadi dengan keterangan yang dijelaskan diatas kita akan bermain di bagian Appbar dan Body dimana kita di khususkan akan sering bermain di bagian body.

Widget

Widget adalah komponen yang mempermudah kita selaku programmer untuk suatu aplikasi, bila kita bayangkan suatu aplikasi itu adalah sebuah mobil maka komponen pendukung seperti ban, spion, radio pemancar dan lain sebagainya adalah widgetnya, selayaknya mobil komponen-komponen pendukung tidak selalu sama setiap mobil komponen pendukung tergantung dengan fungsi mobil tersebut bila mobil yang berfungsi untuk balapan memerlukan nitro sebagai komponen pendukung sebaliknya mobil yang berfungsi untuk pemakaian sehari-hari tidak memerlukan komponen pendukung seperti nitro, maka sama halnya dengan aplikasi dan widget, tidak semua aplikasi memiliki widget yang sama atau memiliki semua widget yang tersedia sama seperti penjelasan diatas komponen widget tergantung fungsi aplikasi yang akan dibuat.

Widget Button

Button adalah suatu komponen widget yang berfungsi mempermudah pengguna untuk memicu suatu perintah tertentu, widget atau komponen sudah sangat familiar dengan kita karena mirip dengan fungsi tombol di kehidupan sehari-hari jadi tampaknya kita sudah sangat terbiasa dengan istilah tombol.

Kode Button

Sebagai patokan kita akan mengikuti contoh kode hello world diatas dengan code sebagai berikut

import 'package:flutter/material.dart';
main () => runApp(latihanwidget());
class latihanwidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: 
          AppBar(
           title: Text("Latihan Button"),
          ),
        body: 
          Text("hello world")
      )
    );
  }
}

Dalam flutter ada dua fungsi untuk menampilkan button itu ada banyak tapi kali ini kita akan membuat contoh fungsi elevatedbutton() karena fungsi ini sangat fleksibel kita ubah, dibagian body dengan menambahkan code sebagai berikut

         body:

          ElevatedButton(

            onPressed: (){

              print("button ditekan");

            },

            child:

              Text("login")

          ),    

Berbeda dengan textfield struktur button lebih rumit daripada textfield button memiliki turunan mengharuskan kita untuk menambahkan turunan onPresed dan child, onPressed adalah kondisi dihasilkan apabila button di tekan dan child sendiri adalah isi turunan dalam button tersebut disini kita menambahkan nilai text pada button maka tampilan aplikasi akan menjadi seperti gambar di bawah

Apabila button ditekan maka di terminal VS Code akan muncul button ditekan seperti gambar terminal dibawah

Jika dilihat tampilannya masih polos maka selanjutnya kita akan sesuaikan tampilan agar lebih menarik

Menyesuaikan Tampilan Button 

1. Mengganti Warna Button

Kali ini kita akan mengubah warna button dengan warna yang lain dengan menambahkan style kedalam elevatedbutton dan pilih warnanya seperti kode sebagai berikut

            style:

              ElevatedButton.styleFrom(

                primary: Colors.black

              ),

Maka Hasil dari kode diatas menjadi gambar dibawah

Warna button yang semula biru menjadi warna hitam sesuai perintah yang dimasukan.

2. Menyesuaikan tampilan border

Kali ini kita akan menyesuaikan bordernya dengan mengecilkan sudut border dengan kode shape tepat dibawah primary

                shape:

                  RoundedRectangleBorder(

                    borderRadius: BorderRadius.circular(40)

                  )

Maka menghasilkan tampilan seperti gambar dibawah.

Terlihat berbeda dengan tampilan sebelumnya sudut border semakin kecil dan lebar. bila dilihat kode style secara keseluruhan menjadi seperti ini

            style:

              ElevatedButton.styleFrom(

                primary: Colors.black,

                shape:

                  RoundedRectangleBorder(

                    borderRadius: BorderRadius.circular(40)

                  )

              ),

Dengan kode secara keseluruhan.

Source Code:

import 'package:flutter/material.dart';

main () => runApp(latihanwidget());

class latihanwidget extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar:

          AppBar(

           title: Text("Latihan Button"),

          ),

        body:

          ElevatedButton(

            style:

              ElevatedButton.styleFrom(

                primary: Colors.black,

                shape:

                  RoundedRectangleBorder(

                    borderRadius: BorderRadius.circular(40)

                  )

              ),

            onPressed: (){

              print("button ditekan");

            },

            child:

              Text("login")

          ),    

      )

    );

  }

}

Sekian yang dapat saya sampaikan terima kasih telah membaca artikel ini bila teman-teman suka dengan konten ini teman-teman bisa mengikuti blog ini dengan mengklik tombol ikuti di bawah dan bila ada saran dan pertanyaan bisa disampaikan di kolom komentar.