Card image cap
[Flutter][27] Form (Bagian 3) Form tipe Radio dengan RadioListTile
Monday, 27 May 2019

Hello world,

Melanjutkan topik mengenai Form dan Textfield yaitu pada bagian ketiga ini saya akan membahas mengenai Radio. Radio adalah salah satu jenis input yang biasanya digunakan untuk menentukan pilihan seperti jenis kelamin, hobi, warna dan lain-lain. Berikut ini adalah contoh sederhana radio dalam flutter.

import 'dart:core';
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new halamanForm(),
));
}

class halamanForm extends StatefulWidget {
@override
_halamanFormState createState() => _halamanFormState();
}

class _halamanFormState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Form"),
),
body: Container(
child: Column(
children: [
new RadioListTile(
value: "L",
title: new Text("Laki-laki"),
activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
),
new RadioListTile(
value: "P",
title: new Text("Perempuan"),
activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
),
],
),
),
);
}
}

Pada contoh di atas saya membuat pilihan jenis kelamin (warna kuning) dengan dua buah RadioListTile yaitu untuk pilihan laki-laki dan perempuan. Pada tahap ini radio belum bisa dipilih karena kita membutuhkan tanda atau parameter yang akan dipakai untuk menyimpan data yang dipilih. Jika dalam textfield kita membutuhkan controller, dalam RadioListTile kita membutuhkan groupValue. Radio dengan opsi sejenis akan menggunakan groupValue yang sama. Lihat contoh di bawah.

new RadioListTile(
value: "L",
title: new Text("Laki-laki"),
groupValue: jk,
    activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
),
new RadioListTile(
value: "P",
title: new Text("Perempuan"),
groupValue: jk,
    activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
),

Selanjutnya untuk menyimpan pilihan maka kita membutuhkan action onpressed. Lihat contoh di bawah.

new RadioListTile(
value: "L",
title: new Text("Laki-laki"),
groupValue: jk,
    activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
    onChanged: (String value) {
_pilihjk(value);
},
),
new RadioListTile(
value: "P",
title: new Text("Perempuan"),
groupValue: jk,
    activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
    onChanged: (String value) {
_pilihjk(value);
},
),

Pada contoh di atas, saat diklik maka akan menjalankan method _pilihjk() yang berisi value yang diambil dari RadioListTile. Di dalam _pilihjk() akan ada action untuk mengubah isi dari variable jk menjadi sesuai dengan value yang dipilih.

void _pilihjk(String value) {
setState(() {
jk = value;
});
}

Full Code :

import 'dart:core';
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new halamanForm(),
));
}

class halamanForm extends StatefulWidget {
@override
_halamanFormState createState() => _halamanFormState();
}

class _halamanFormState extends State {
String jk = "";

void _pilihjk(String value) {
setState(() {
jk = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Form"),
),
body: Container(
child: Column(
children: [
new RadioListTile(
value: "L",
title: new Text("Laki-laki"),
groupValue: jk,
onChanged: (String value) {
_pilihjk(value);
},
activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
),
new RadioListTile(
value: "P",
title: new Text("Perempuan"),
groupValue: jk,
onChanged: (String value) {
_pilihjk(value);
},
activeColor: Colors.blue,
subtitle: new Text("Pilih salah satu"),
),
],
),
),
);
}
}


Selamat mencoba :)