Halo teman Flutter! Pada artikel kali ini saya ingin membahas tentang “Radio Button in Flutter”.
Radio Button merupakan sebuah komponen Widget atau sebuah Material Design yang ada pada Flutter. Radio Button digunakan ketika ingin membuat sebuah pilihan atau opsi dan dapat dipilih secara tunggal diantara pilihan lainnya.
- Buat varibel untuk value Radio Button
int? _value = 1;2. Kemudian buat codingan seperti berikut
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:u_cast_app/ui/listpage/detailcustomer/detail_customer.dart';
class DatePicker extends StatefulWidget {
const DatePicker({Key? key}) : super(key: key);
@override
_DatePickerState createState() => _DatePickerState();
}
class _DatePickerState extends State<DatePicker> {
int? _value = 1;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Text(
"Pilih Bahasa Pemograman",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(height: 20),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Dart",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
],
),
)),
SizedBox(height: 10),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Java",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
],
),
)),
SizedBox(height: 10),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Kotlin",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
],
),
)),
SizedBox(height: 10),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Swift",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
],
),
)),
SizedBox(
height: 20,
),
],
),
),
),
),
);
}
}
3. Terakhir tambahkan codingan berikut pada setiap Container.
Radio(
value: 1,
groupValue: 1,
onChanged: (value) {
setState(() {
_value = value as int?;
});
},
)4. Panggil variabel _value ke dalam groupValue .
Radio(
value: 1,
groupValue: _value,
onChanged: (value) {
setState(() {
_value = value as int?;
});
},
)5. Berikut adalah hasil Runningnya
Berikut Codingan lengkap dari widget Radio Button
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:u_cast_app/ui/listpage/detailcustomer/detail_customer.dart';
class DatePicker extends StatefulWidget {
const DatePicker({Key? key}) : super(key: key);
@override
_DatePickerState createState() => _DatePickerState();
}
class _DatePickerState extends State<DatePicker> {
int? _value = 1;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Text(
"Pilih Bahasa Pemograman",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(height: 20),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Dart",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
Radio(
value: 1,
groupValue: _value,
onChanged: (value) {
setState(() {
_value = value as int?;
});
},
)
],
),
)),
SizedBox(height: 10),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Java",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
Radio(
value: 2,
groupValue: _value,
onChanged: (value) {
setState(() {
_value = value as int?;
});
},
)
],
),
)),
SizedBox(height: 10),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Kotlin",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
Radio(
value: 3,
groupValue: _value,
onChanged: (value) {
setState(() {
_value = value as int?;
});
},
)
],
),
)),
SizedBox(height: 10),
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xff263238), width: 0.1),
),
child: Padding(
padding: EdgeInsets.only(
top: 20, right: 20, left: 20, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Swift",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.black),
),
Radio(
value: 4,
groupValue: _value,
onChanged: (value) {
setState(() {
_value = value as int?;
});
},
)
],
),
)),
],
),
),
),
),
);
}
}
Selamat Mencoba sobat Flutter 🙂