Tutorial Flutter Menciptakan Radio Button Gampang Dan Lengkap

Tutorial Flutter Radio and RadioListTile

- Widget Radio merupakan pecahan dari Material Design yang dipakai untuk menciptakan pilihan / opsi. Opsi yang dipilih bersifat tunggal, kau sanggup menggunakannya untuk menciptakan komponen dimana pengguna hanya sanggup menentukan 1 diantara pilihan lainnya.

Untuk menciptakan Radio Button pada Flutter, kau sanggup memakai widget Radio dan RadioListTile. Pada tutorial ini akan kita bahas penggunaannya lengkap dengan contohnya, silahkan ikuti tutorialnya hingga selesai ya.

Membuat project flutter

Pertama, buat project gres dengan nama flutter_radio_button, pastikan terkoneksi dengan internet ketika pertama kali menciptakan project dan tunggu hingga prosesnya selesai.

Menggunakan Widget Radio

Untuk teladan yang pertama kita akan memakai widget Radio, buka file main.dart pada folder lib. Ubah dan tulis kodenya menjadi menyerupai 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;    simpulan 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 kau 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 {   simpulan int index;   simpulan String text;   RadioGroup({this.index, this.text}); } 

Sekarang coba run, jadinya menyerupai berikut :

flutter radio button tutorial

Menggunakan Widget RadioListTile

RadioListTile merupakan kombinasi dari widget ListTile dengan Radio. Widget RadioListTile berisi komponen menyerupai radio button, title, subtitle, dan pengaturan lainnya. Untuk menggunakannya kita gunakan arahan yang sebelumnya namun kita hanya mengubah pada method _buildRadioButton() menjadi menyerupai 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, memakai RadioListTile lebih sederhana untuk menciptakan radio button dan titlenya, namun RadioListTile memiliki ukuran padding yang lebih besar, sebab behavior dari RadioListTile bertujuan untuk ukuran lebar dan vertical scroll list. Kita lihat jadinya menyerupai berikut :

tutorial flutter radio list tile

Untuk mengurangi jarak pada RadioListTile kau sanggup memakai dense: true. Menggunakan RadioListTile juga sanggup melaksanakan controll posisi radio button dan title, coba tambahkan arahan berikut didalam RadioListTile :

controlAffinity: ListTileControlAffinity.trailing, 

Sehingga posisi radio button berada pada trailing, kalau kita run jadinya menyerupai berikut :

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 sanggup menentukan salah satu. Disinilah kita memakai variable yang menampung group value.

Kenapa value awalnya -1 ? Tujuannya ketika pengguna belum menentukan radio button belum ada yang selected. Jika kau 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 menciptakan radio button, kita menciptakan class POJO untuk menampung posisi index dan text radio button.

class RadioGroup { simpulan int index;   simpulan String text;   RadioGroup({this.index, this.text}); } 

Sehingga kita tinggal menciptakan list yang berisi data pilihan menyerupai 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 ketika menciptakan radio button yang dinamis, kita melaksanakan mapping list yang sudah kita buat sebelumnya, dan menampungnya didalam children pada widget Column. Perhatikan arahan 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 memakai groupValue dengan variable yang sudah kita buat sebelumnya, dan untuk mengubah nilai sesuai dengan yang dipilih kita mengubah state pada onChanged.

Untuk seluruh kodenya, kau juga sanggup mempelajari di repository github :

Github Saya

Kesimpulan

Untuk menciptakan radio button pada Flutter, kau sanggup memakai widget Radio atau RadioListTile. Pilih sesuai kebutuhan, dan yang perlu diingat bahwa radio button membutuhkan group value serta callback berupa onChanged sehingga radio button sanggup berfungsi dengan baik.

Jika kau ada pertanyaan atau mau berdiskusi sanggup melalui kolom komentar, jangan lupa subscribe melalui email untuk website codingtive untuk mendapat tutorial dan artikel menarik lainnya.

Untuk menambah skill, kau juga sanggup mempelajari artikel berikut :

Tutorial flutter menampilkan List dengan ListView Builder

Tutorial flutter cara menciptakan tampilan grid

Semoga bermanfaat ya.

Share this post