Dalam Flutter, tombol adalah salah satu widget yang paling sering digunakan untuk menambahkan interaksi ke aplikasi. Flutter menyediakan beberapa widget tombol yang dapat digunakan, yaitu  TextButton, ElevatedButton, and OutlinedButton.

Perbedaan Masing-Masing jenis

TextButton

TextButton adalah widget tombol yang baru ditambahkan ke Flutter pada versi 1.22. TextButton mirip dengan FlatButton, namun memiliki tampilan yang lebih ringan dan tidak memiliki efek emboss. TextButton cocok digunakan dalam layout yang memerlukan tombol teks dengan tampilan yang lebih ringan.

Untuk menggunakan TextButton, contoh sederhananya seperti ini:

TextButton(
  onPressed: () {
    // code to execute when button is pressed
  },
  child: Text("Press me"),
)

TextButton memiliki beberapa properti yang dapat kita atur untuk mengubah tampilannya. Misalnya, kita dapat menggunakan properti style untuk mengubah gaya teks pada tombol, atau menggunakan properti color untuk mengubah warna tombol.

TextButton(
  style: TextStyle(fontSize: 18, color: Colors.red),
  color: Colors.yellow,
  onPressed: () {
    // code to execute when button is pressed
  },
  child: Text("Press me"),
)

ElevatedButton

ElevatedButton adalah widget tombol yang ditambahkan ke Flutter pada versi 2.0. ElevatedButton mirip dengan RaisedButton, namun memiliki tampilan yang lebih datar dan tidak memiliki efek emboss. ElevatedButton cocok digunakan dalam layout yang memerlukan tombol dengan tampilan yang lebih datar dan elegan.

Untuk menggunakan ElevatedButton , contoh sederhananya seperti ini:

ElevatedButton(
  onPressed: () {
    // code to execute when button is pressed
  },
  child: Text("Press me"),
)

ElevatedButton memiliki beberapa properti yang dapat kita atur untuk mengubah tampilannya. Misalnya, kita dapat menggunakan properti style untuk mengubah gaya teks pada tombol, atau menggunakan properti color untuk mengubah warna tombol.

ElevatedButton(
  style: TextStyle(fontSize: 18, color: Colors.red),
  color: Colors.yellow,
  onPressed: () {
    // code to execute when button is pressed
  },
  child: Text("Press me"),
)

Dengan menggunakan ElevatedButton, Anda dapat dengan mudah menambahkan tombol dengan tampilan yang lebih datar dan elegan ke aplikasi Flutter Anda.

OutlinedButton

OutlinedButton adalah widget tombol yang ditambahkan ke Flutter pada versi 2.0. OutlinedButton mirip dengan OutlineButton, namun memiliki tampilan yang lebih datar dan tidak memiliki efek emboss. OutlinedButton cocok digunakan dalam layout yang memerlukan tombol dengan tampilan yang lebih datar dan elegan.

Untuk menggunakan OutlinedButton , contoh sederhananya seperti ini:

OutlinedButton(
  onPressed: () {
    // code to execute when button is pressed
  },
  child: Text("Press me"),
)

OutlinedButton memiliki beberapa properti yang dapat kita atur untuk mengubah tampilannya. Misalnya, kita dapat menggunakan properti style untuk mengubah gaya teks pada tombol, atau menggunakan properti color untuk mengubah warna garis tepi tombol.

OutlinedButton(
  style: TextStyle(fontSize: 18, color: Colors.red),
  color: Colors.yellow,
  onPressed: () {

Menambahkan Event di Button

Pada tutorial ini, kita akan belajar cara menambahkan interaksi ke aplikasi Flutter menggunakan tombol dan menangani event tap.

Untuk memulai, pertama-tama kita perlu menambahkan tombol ke dalam layout aplikasi kita. Dalam Flutter, kita dapat menggunakan widget TextButton atau ELevatedButton untuk ini. Perbedaan utama antara kedua widget ini adalah ELevatedButton memiliki efek emboss sedangkan TextButton tidak.

Untuk menambahkan tombol ke layout, kita bisa menambahkan widget tombol ke dalam widget Column atau Row seperti ini:

Column(
  children: [
    TextButton(
      onPressed: () {
        // code to execute when button is pressed
      },
      child: Text("Press me"),
    ),
    ElevatedButton(
      onPressed: () {
        // code to execute when button is pressed
      },
      child: Text("Press me"),
    ),
  ],
)

Setelah kita menambahkan tombol ke layout, kita perlu menangani event tap pada tombol tersebut. Kita dapat melakukan ini dengan menambahkan fungsi ke dalam properti onPressed pada widget tombol. Fungsi ini akan dieksekusi setiap kali tombol ditekan.

Untuk contoh sederhana, mari kita coba menampilkan alert dialog setiap kali tombol ditekan. Kita dapat menggunakan widget showDialog untuk ini. Tambahkan kode berikut ke dalam fungsi onPressed pada widget tombol:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text("Button pressed"),
      content: Text("You pressed the button!"),
      actions: [
        TextButton(
          child: Text("Ok"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

Sekarang setiap kali tombol ditekan, alert dialog akan ditampilkan ke layar. Anda juga dapat menggunakan event tap untuk melakukan tugas lain seperti mengirim data ke server atau mengubah state aplikasi.

Dengan menambahkan tombol dan menangani event tap, Anda dapat menambahkan interaksi ke aplikasi Flutter Anda. Selamat mencoba!

Sumber :