RadioButton

Radio merupakan inputan yang digunakan untuk memilih salah satu dari beberapa pilihan dalam suatu kelompok menu atau value . Berikut contoh kodenya

Pertama pada membuat Radio button kita perlu membuat Stateful Widget karna akan ada perubahan value jika kita memilih salah satu pilihan/radio

class RadioButton extends StatefulWidget {
  const RadioButton({Key? key}) : super(key: key);

  @override
  State<RadioButton> createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Setelah itu kita perlu membuat variabel kosong yang nantinya akan kita gunakan untuk mendapatkan value dari Radio Button yang akan kita gunakan dari beberapa menu

class RadioButton extends StatefulWidget {
  const RadioButton({Key? key}) : super(key: key);

  @override
  State<RadioButton> createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {

// Variabel yang akan kita gunakan untuk menampung value
  var languageValue = "";

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Setelah membuat variabel kita akan membuat fungsi dimana kita dapat mendapatkan satu value dari beberapa value yang nantinya akan kita masukkan pada variabel yang telah kita buat

 void selectRadio(String value) {
   setState(() {
     this.languageValue = value;
   });
 }

kita bisa taruh fungsinya dibawah variabel languageValue, Setelah kita membuat fungsinya sekarang kita membuat tampilannya menggunakan widget Radio Button

Scaffold(
        appBar: AppBar(
          title: const Text('First Screen'),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RadioListTile(
                value: 'Dart',
                title: Text('Dart'),
                groupValue: languageValue ,
                onChanged: (String? value) {
                  selectRadio(value!);
                }),
            RadioListTile(
                value: 'Kotlin',
                title: Text('Kotlin'),
                groupValue: languageValue ,
                onChanged: (String? value) {
                  selectRadio(value!);
                }),
            RadioListTile(
                value: 'Swift',
                title: Text('Swift'),
                groupValue: languageValue ,
                onChanged: (String? value) {
                  selectRadio(value!);
                }),
            Text(languageValue)],
        ));

Setelah itu sudah selesailah pembuatan Input User menggunakan Radio Button Pada Flutter, berikut kode lengkapnya

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadioButton(),
    );
  }
}

class RadioButton extends StatefulWidget {
 const RadioButton({Key? key}) : super(key: key);

 @override
 State<RadioButton> createState() => _RadioButtonState();
}

class _RadioButtonState extends State<RadioButton> {

 var languageValue = "";

 void selectRadio(String value) {
   setState(() {
     this.languageValue = value;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('First Screen'),
     ),
     body: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
         RadioListTile(
             value: 'Dart',
             title: Text('Dart'),
             groupValue: languageValue ,
             onChanged: (String? value) {
               selectRadio(value!);
             }),
         RadioListTile(
             value: 'Kotlin',
             title: Text('Kotlin'),
             groupValue: languageValue ,
             onChanged: (String? value) {
               selectRadio(value!);
             }),
         RadioListTile(
             value: 'Swift',
             title: Text('Swift'),
             groupValue: languageValue ,
             onChanged: (String? value) {
               selectRadio(value!);
             }),
         Text(languageValue)],
     ));
 }
}

Berikut hasil dari code Radio Button

Text yang berada dibawah akan berganti sesuai saat kita mengclick RadioButton