Tutorial Flutter Membuat Radio Button Mudah dan Lengkap

Tutorial Flutter Radio and RadioListTile
Tutorial Flutter Radio and RadioListTile
Codingtive.com - Widget Radio merupakan bagian dari Material Design yang digunakan untuk membuat pilihan / opsi. Opsi yang dipilih bersifat tunggal, kamu dapat menggunakannya untuk membuat komponen dimana pengguna hanya dapat memilih 1 diantara pilihan lainnya.

Untuk membuat Radio Button pada Flutter, kamu dapat menggunakan widget Radio dan RadioListTile. Pada tutorial ini akan kita bahas penggunaannya lengkap dengan contohnya, silahkan ikuti tutorialnya sampai selesai ya.

Membuat project flutter

Pertama, buat project baru dengan nama flutter_radio_button, pastikan terkoneksi dengan internet ketika pertama kali membuat project dan tunggu sampai prosesnya selesai.

Menggunakan Widget Radio

Untuk contoh yang pertama kita akan menggunakan widget Radio, buka file main.dart pada folder lib. Ubah dan tulis kodenya menjadi seperti berikut :
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Flutter Radio Button",
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  int _rgProgramming = -1;
  String _selectedValue;

  final List<RadioGroup> _programmingList = [
    RadioGroup(index: 1, text: "Kotlin"),
    RadioGroup(index: 2, text: "Swift"),
    RadioGroup(index: 3, text: "Flutter"),
    RadioGroup(index: 4, text: "Java"),
    RadioGroup(index: 5, text: "React Native"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Flutter Radio Button"),
      ),
      body: Container(
        padding: EdgeInsets.all(18.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("Apa bahasa pemrograman yang kamu suka ?"),
            _buildRadioButton(),
            Text("Kamu menyukai pemrograman :"),
            SizedBox(height: 8.0,),
            Center(
              child: Text(
                _selectedValue == null ? "Belum memilih" : _selectedValue,
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildRadioButton() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: _programmingList.map((programming) => Row(
        children: <Widget>[
          Radio(
            value: programming.index,
            groupValue: _rgProgramming,
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            onChanged: (value) {
              setState(() {
                _rgProgramming = value;
                _selectedValue = programming.text;
              });
            },
          ),
          Text(programming.text),
        ],
      )).toList(),
    );
  }
}

class RadioGroup {
  final int index;
  final String text;
  RadioGroup({this.index, this.text});
}
Sekarang coba run, hasilnya seperti berikut :
flutter radio button tutorial
flutter radio button tutorial

Menggunakan Widget RadioListTile

RadioListTile merupakan kombinasi dari widget ListTile dengan Radio. Widget RadioListTile berisi komponen seperti radio button, title, subtitle, dan pengaturan lainnya. Untuk menggunakannya kita gunakan kode yang sebelumnya namun kita hanya mengubah pada method _buildRadioButton() menjadi seperti berikut :
Widget _buildRadioButton() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: _programmingList.map((programming) => RadioListTile(
      title: Text(programming.text),
      value: programming.index,
      groupValue: _rgProgramming,
      dense: true,
      onChanged: (value) {
        setState(() {
          _rgProgramming = value;
          _selectedValue = programming.text;
        });
      },
    )).toList(),
  );
}
Jika dilihat kodenya, menggunakan RadioListTile lebih sederhana untuk membuat radio button dan titlenya, namun RadioListTile memiliki ukuran padding yang lebih besar, karena behavior dari RadioListTile bertujuan untuk ukuran lebar dan vertical scroll list. Kita lihat hasilnya seperti berikut :
tutorial flutter radio list tile
tutorial flutter radio list tile
Untuk mengurangi jarak pada RadioListTile kamu dapat menggunakan dense: true. Menggunakan RadioListTile juga dapat melakukan controll posisi radio button dan title, coba tambahkan kode berikut didalam RadioListTile :
controlAffinity: ListTileControlAffinity.trailing,
Sehingga posisi radio button berada pada trailing, jika kita run hasilnya seperti berikut :
flutter radio list tile controll afinity
flutter radio list tile controll afinity
Untuk memahami lebih dalam lagi, mari kita bedah kodenya :

Bedah Kode

Radio button memerlukan group value untuk mengelompokan semua pilihan menjadi 1, sehingga kita hanya dapat memilih salah satu. Disinilah kita menggunakan variable yang menampung group value.

Kenapa value awalnya -1 ? Tujuannya ketika pengguna belum memilih radio button belum ada yang selected. Jika kamu ingin defaultnya, ubah valuenya menjadi 1 atau pilihan lainnya.
int _rgProgramming = -1;
String _selectedValue;
Variable _selectedValue digunakan untuk menampung nilai pada radio button yang dipilih.

Untuk memudahkan kita membuat radio button, kita membuat class POJO untuk menampung posisi index dan text radio button.
class RadioGroup {
final int index;
  final String text;
  RadioGroup({this.index, this.text});
}
Sehingga kita tinggal membuat list yang berisi data pilihan seperti berikut :
final List _programmingList = [
  RadioGroup(index: 1, text: "Kotlin"),
  RadioGroup(index: 2, text: "Swift"),
  RadioGroup(index: 3, text: "Flutter"),
  RadioGroup(index: 4, text: "Java"),
  RadioGroup(index: 5, text: "React Native"),
];
Pada saat membuat radio button yang dinamis, kita melakukan mapping list yang sudah kita buat sebelumnya, dan menampungnya didalam children pada widget Column. Perhatikan kode berikut :
Widget _buildRadioButton() {
return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: _programmingList.map((programming) => Row(
      children: <Widget>[
        Radio(
          value: programming.index,
          groupValue: _rgProgramming,
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          onChanged: (value) {
            setState(() {
              _rgProgramming = value;
              _selectedValue = programming.text;
            });
          },
        ),
        Text(programming.text),
      ],
    )).toList(),
  );
}
Pada widget Radio kita menggunakan groupValue dengan variable yang sudah kita buat sebelumnya, dan untuk mengubah nilai sesuai dengan yang dipilih kita mengubah state pada onChanged.

Untuk seluruh kodenya, kamu juga dapat mempelajari di repository github :

Kesimpulan

Untuk membuat radio button pada Flutter, kamu dapat menggunakan widget Radio atau RadioListTile. Pilih sesuai kebutuhan, dan yang perlu diingat bahwa radio button membutuhkan group value serta callback berupa onChanged sehingga radio button dapat berfungsi dengan baik.

Jika kamu ada pertanyaan atau mau berdiskusi dapat melalui kolom komentar, jangan lupa subscribe melalui email untuk website codingtive untuk mendapatkan tutorial dan artikel menarik lainnya.

Untuk menambah skill, kamu juga dapat mempelajari artikel berikut :

Semoga bermanfaat ya.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Membuat Radio Button Mudah dan Lengkap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel