flutterradiobuttonlist

How to add trailng icon in radio list tile flutter


I am using the RadioListTile for displaying the dynamic data with radio button in flutter,but I want to display the same list with an trailing icon for editing the list data.


Solution

  • In title , you can user Row to wrap Text and Icon
    Use Expanded and flex to control width you need
    code snippet

    title: Row(
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Text(
                  "firstname" +
                      "lastname" +
                      "address_1" +
                      "city" +
                      "country234123412344523523452542345234523523542345245234523452345235234523452345245234523452452542",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                  style: TextStyle(color: Colors.black, fontSize: 16.0),
                ),
              ),
              Expanded(
                flex: 1,
                child: InkWell(
                  child: Icon(
                    Icons.audiotrack,
                    color: Colors.green,
                    size: 30.0,
                  ),
                ),
              )
            ],
          )
    

    enter image description here

    full test code

    // Flutter code sample for
    
    // ![RadioListTile sample](https://flutter.github.io/assets-for-api-docs/assets/material/radio_list_tile.png)
    //
    // This widget shows a pair of radio buttons that control the `_character`
    // field. The field is of the type `SingingCharacter`, an enum.
    
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    /// This Widget is the main application widget.
    class MyApp extends StatelessWidget {
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: _title,
          home: Scaffold(
            appBar: AppBar(title: const Text(_title)),
            body: MyStatefulWidget(),
          ),
        );
      }
    }
    
    enum SingingCharacter { lafayette, jefferson }
    
    class MyStatefulWidget extends StatefulWidget {
      MyStatefulWidget({Key key}) : super(key: key);
    
      @override
      _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
    }
    
    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      SingingCharacter _character = SingingCharacter.lafayette;
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            RadioListTile<SingingCharacter>(
              title: const Text('Lafayette'),
              value: SingingCharacter.lafayette,
              groupValue: _character,
              onChanged: (SingingCharacter value) {
                setState(() {
                  _character = value;
                });
              },
            ),
            RadioListTile<SingingCharacter>(
              title: Row(
                children: <Widget>[
                  Expanded(
                    flex: 3,
                    child: Text(
                      "firstname" +
                          "lastname" +
                          "address_1" +
                          "city" +
                          "country234123412344523523452542345234523523542345245234523452345235234523452345245234523452452542",
                      overflow: TextOverflow.ellipsis,
                      maxLines: 3,
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: InkWell(
                      child: Icon(
                        Icons.audiotrack,
                        color: Colors.green,
                        size: 30.0,
                      ),
                    ),
                  )
                ],
              ),
              value: SingingCharacter.jefferson,
              groupValue: _character,
              onChanged: (SingingCharacter value) {
                setState(() {
                  _character = value;
                });
              },
            ),
          ],
        );
      }
    }