How To Change The Radio Button Color In Flutter App

admin_img Posted By Bajarangi soft , Posted On 05-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 Change The Radio Button Color In Flutter App

Complete Code For Change Radio Button Color In Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new MyApp(),
  ));
}

class GroupModel {
  String text;
  int index;
  bool selected;

  GroupModel({this.text, this.index, this.selected});
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  int _value2 = 0;
  List<GroupModel> _group = [
    GroupModel(text: "None", index: 1, selected: true),
    GroupModel(text: "CallListo", index: 2, selected: false),
    GroupModel(text: "Ganymede", index: 3, selected: false),
  ];

  Widget makeRadioTiles() {
    List<Widget> list = new List<Widget>();

    for (int i = 0; i < _group.length; i++) {
      list.add(new RadioListTile(
        value: _group[i].index,
        groupValue: _value2,
        selected: _group[i].selected,
        onChanged: (val) {
          setState(() {
            for (int i = 0; i < _group.length; i++) {
              _group[i].selected = false;
            }
            _value2 = val;
            _group[i].selected = true;
          });
        },
        activeColor: Colors.red,
        title: new Text(
          ' ${_group[i].text}',
          style: TextStyle(
              color: _group[i].selected ? Colors.black : Colors.grey,
              fontWeight:
              _group[i].selected ? FontWeight.bold : FontWeight.normal),
        ),
      ));
    }

    Column column = new Column(
      children: list,
    );
    return column;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        backgroundColor: Colors.red,
        title: new Text('Radio Button'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Center(
          child: new Column(
            children: <Widget>[makeRadioTiles()],
          ),
        ),
      ),
    );
  }
}

Related Post