Search code examples
flutterdartradio-buttonrowflutter-listview

Flutter : How to create a Radio Buttons inside Listview?


  • I'm trying to implement a code as design attached in pic
  • but when I'm trying to press in any item of list (Radio btns not updated with new value)
  • could someone help me to implement it as design attached

design sample

 var _oneValue = '';
  var timeSlot = [
    "١٢:٠٠ منتصف الليل",
    "١:٠٠ صباحا",......


  Row(
                                                            mainAxisAlignment:
                                                                MainAxisAlignment
                                                                    .spaceBetween,
                                                            children: [
                                                              Expanded(
                                                                child: Text(
                                                                  (timeSlot[i]),
                                                                  style: Typographies
                                                                      .largeBodyStyle(),
                                                                ),
                                                              ),
                                                              Radio(
                                                                  activeColor:
                                                                      ColorManager
                                                                          .black,
                                                                  value: timeSlot[i],
                                                                  groupValue:
                                                                      _oneValue,
                                                                  onChanged:
                                                                      (value) {
                                                                    setState(
                                                                        () {
                                                                      _oneValue =
                                                                          value!;
                                                                      print(
                                                                          _oneValue);
                                                                    });
                                                                  })
                                                            ],
                                                          ),
  • try to switch between items

Solution

  • UPDATED:

    import 'package:flutter/material.dart';
    
    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      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: const MyStatefulWidget(),
          ),
        );
      }
    }
    
    class MyStatefulWidget extends StatefulWidget {
      const MyStatefulWidget({super.key});
    
      @override
      State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
    }
    
    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      List timeSlot = [
        {'label': 'Item1', 'value': 1},
        {'label': 'Item2', 'value': 2}
      ];
      int _oneValue = -1;
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            for (var item in timeSlot)
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Text(
                      (item['label']),
                      // style: Typographies.largeBodyStyle(),
                    ),
                  ),
                  Radio(
                      activeColor: Colors.blue,
                      value: item['value'],
                      groupValue: _oneValue,
                      onChanged: (value) {
                        setState(() {
                          _oneValue = value!;
                          print(_oneValue);
                        });
                      })
                ],
              ),
          ],
        );
      }
    }