How To Create Custom Radio Button In Flutter Android

admin_img Posted By Bajarangi soft , Posted On 06-10-2020

Radio button is used to select single item from multiple items in mobile applications. In flutter we used RadioListTile widget to create Radio buttons. Radio buttons gives us the functionality to automatically select single item from multiple list. User cannot select more that one item in radio button. Radio buttons is mostly used to define main information like make female, school college and etc.

How To Add Custom Radio Button In Flutter Android

Complete Code For Custom Radio BUtton In Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.lightGreen,
            title: Text("Custom Radio Button"),
          ),
          body: SafeArea(
              child : Center(

                child:Radiobutton(),

              )
          )
      ),
    );
  }
}

class Radiobutton extends StatefulWidget {
  @override
  RadioButtonWidget createState() => RadioButtonWidget();
}

class RadioButtonWidget extends State {

  String radioItem = '';

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[

        RadioListTile(
          controlAffinity: ListTileControlAffinity.trailing,
          groupValue: radioItem,
          title: Text('Item 1'),
          value: 'Item 1',
          onChanged: (val) {
            setState(() {
              radioItem = val;
            });
          },
        ),

        RadioListTile(
          controlAffinity: ListTileControlAffinity.trailing,
          groupValue: radioItem,
          title: Text('Item 2'),
          value: 'Item 2',
          onChanged: (val) {
            setState(() {
              radioItem = val;
            });
          },
        ),
        RadioListTile(
          controlAffinity: ListTileControlAffinity.trailing,
          groupValue: radioItem,
          title: Text('Item 3'),
          value: 'Item 3',
          onChanged: (val) {
            setState(() {
              radioItem = val;
            });
          },
        ),

        Text('$radioItem', style: TextStyle(fontSize: 23),)

      ],
    );
  }
}

Related Post