选择单选按钮时如何更改RadioListTile标题的颜色?

时间:2019-12-25 08:32:21

标签: flutter dart

我希望我的输出是这种方式。选择该选项时,我希望文本变为粗体,我想更改选中单选按钮时RadioListTile标题的颜色。

I want my output to be this way. On selecting the option, I want the text to turn bold

2 个答案:

答案 0 :(得分:0)

尝试这种方式

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    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: "Andorid", index: 1, selected: true),
    GroupModel(text: "IOS", index: 2, selected: false),
    GroupModel(text: "Flutter", 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.purple,
        controlAffinity: ListTileControlAffinity.trailing,
        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(
        title: new Text('RadioListTile Demo'),
      ),
      //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Center(
          child: new Column(
            children: <Widget>[makeRadioTiles()],
          ),
        ),
      ),
    );
  }
}

输出

enter image description here

enter image description here

答案 1 :(得分:0)

您可以使用key属性来标识选定的radioList或

enum SingingCharacter { lafayette, jefferson }

// ...

SingingCharacter _character = SingingCharacter.lafayette;

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      RadioListTile<SingingCharacter>(
        title: Text('Lafayette',style:TextStyle(color:_character==SingingCharacter.lafayette ? 'SELECTED COLOR': 'NON SELECTED COLOR' ),
        value: SingingCharacter.lafayette,
        groupValue: _character,
        onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
      ),
      RadioListTile<SingingCharacter>(
        title: Text('Thomas Jefferson',style:TextStyle(color:_character==SingingCharacter.jefferson? 'SELECTED COLOR': 'NON SELECTED COLOR' ),
        value: SingingCharacter.jefferson,
        groupValue: _character,
        onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
      ),
    ],
  );
}

在直接提出问题之前,请先阅读flutter documentation