Как выбрать только один флажок из списка флажков в флаттере - PullRequest
0 голосов
/ 24 января 2020

Здесь у меня есть одна сервисная страница, где я отобразил все сервисы, и там я могу выбрать несколько сервисов. но я хочу выбрать только один сервис. Я использовал флажок Listitle для выбора услуг. Я хочу, чтобы пользователь мог выбрать только одну услугу, а не несколько услуг одновременно.

Вот код, который я пробовал:

class _AddWalkinServiceScreenState extends State<AddWalkinServiceScreen>
    with TickerProviderStateMixin {
  List<int> servicesIds = [];
  int selected = 0;
  Map<String, bool> _selection = {};
  List<BspServices.Service> selectedServices = [];
  SearchBarController _controller = new SearchBarController();
  String _searchText = '';
  List<dynamic> finalList = new List();
  List<dynamic> searchList = new List();
  bool isLoading = false;
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.easeInQuint);
    controller.forward();
  }

  Widget _renderServices(AddWalkinServiceViewModel awsVm) {
    List lovCountryServices = searchList.length != 0 ? searchList : finalList;
    if (lovCountryServices == null || lovCountryServices.length == 0) {
      return Container(
        child: Center(
          child: Text("No Services available for this combination"),
        ),
      );
    }
    // print(lovCountryServices);
    return Container(
      child: finalList.length < 1
          ? ListTile(
              leading: CircularProgressIndicator(),
            )
          : ListView.builder(
              shrinkWrap: true,
              padding: const EdgeInsets.all(8.0),
              itemCount: lovCountryServices.length,
              itemBuilder: (BuildContext context, int index) {
                var item = lovCountryServices[
                    index]; // should be outside build function
                List items = item['services'];
                return ExpansionTile(
                  title: Text(item['name']),
                  children: List.generate(items.length, (i) {
                    _selection[items[i]['name']] =
                        _selection[items[i]['name']] ?? items[i]['isSelected'];
                    return CheckboxListTile(
                      title: Text(items[i]['name']),
                      value: _selection[items[i]['name']] == null
                          ? false
                          : _selection[items[i]['name']],
                      onChanged: (val) {
                        setState(() {
                          _selection[items[i]['name']] = val;

                          if (val) {
                            servicesIds.add(items[i]['id']);
                            List<BspServices.Service> services =
                                selectedServices.where((service) {
                              return service.mainCategory == item['name'];
                            }).toList();
                            SubCategory subService = new SubCategory(
                              id: items[i]['id'],
                              name: items[i]['name'],
                            );
                            List<SubCategory> subCategories = [];
                            if (services.length < 1) {
                              subCategories.add(subService);
                              selectedServices.add(
                                new BspServices.Service(
                                  mainCategory: item['name'],
                                  mainCategoryId: item['id'],
                                  subCategory: subCategories,
                                ),
                              );
                            } else {
                              print('services in else');
                              print(services[0].subCategory);
                              subCategories = services[0].subCategory;
                              subCategories.add(subService);
                            }
                          } else {
                            servicesIds.removeWhere((service) {
                              return service == items[i]['id'];
                            });
                            List<BspServices.Service> services =
                                selectedServices.where((service) {
                              return service.mainCategory == item['name'];
                            }).toList();
                            services[0].subCategory.removeWhere((subService) {
                              return subService.id == items[i]['id'];
                            });
                          }
                        });
                        print('servicesIds after set state');
                        print(servicesIds);
                      },
                    );
                  }),
                );
              },
            ),
    );
  }


  Widget content(BuildContext context, AddWalkinServiceViewModel awsVm) {
    Orientation orientation = MediaQuery.of(context).orientation;
    var colorStyles = Theming.colorstyle(context);
    final appBar = SearchBar(
      controller: _controller,
      onQueryChanged: (String query) {
        print('Search Query $query');
        setState(() {
          _searchText = query;
        });
        _searchFilter();
      },
      defaultBar: AppBar(
        elevation: 0,
        centerTitle: true,
        leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {
              Navigator.pop(context);
              // NavigationHelper.navigatetoBack(context);
            }),
        title: Text('Select Services'),
      ),
    );



    return new Scaffold(
      backgroundColor: colorStyles['primary'],
      appBar: appBar,
      bottomNavigationBar: bottomNavigationBar,
      body: FadeTransition(
        opacity: animation,
        child: new Container(
          margin: EdgeInsets.only(top: 10),
          decoration: new BoxDecoration(
            color: Colors.white,
            borderRadius: new BorderRadius.only(
              topLeft: const Radius.circular(50.0),
              topRight: const Radius.circular(50.0),
            ),
          ),
          child: isLoading ? FadeInUi() : _renderServices(awsVm),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new StoreConnector<AppState, AddWalkinServiceViewModel>(
      converter: (Store<AppState> store) =>
          AddWalkinServiceViewModel.fromStore(store),
      onInit: (Store<AppState> store) {
        print('store.state.servicesState.servicesByCountry');
        print(store
            .state.servicesState.servicesByCountry.servicesByCountry[0].name);
        Map<String, dynamic> services =
            store.state.servicesState.servicesByCountry.toJson();
        finalList = services['servicesByCountry'];
        print('finalList = $finalList');
      },
      builder: (BuildContext context, AddWalkinServiceViewModel awsVm) =>
          content(context, awsVm),
    );
  }
}

Ответы [ 2 ]

1 голос
/ 24 января 2020

ОБНОВЛЕНО

List<Map> services = [];
      List<int> selections = [];

      @override
      void initState() {
        super.initState();
        getList();
      }

      void getList() async {
        //get data from internet/api
        //for ex. I m using offline data
        setState(() {
          services = List.generate(
              10,
              (ind) => {
                    'name': 'Service Category $ind',
                    'services': ['Service 1', 'Service 2']
                  }).toList();
          selections = List.generate(10, (ind) => -1).toList();
        });
      }

      @override
      Widget build(BuildContext context) {
        return Container(
            padding: EdgeInsets.all(20),
            color: Colors.white,
            child: services.length < 1
                ? ListTile(
                    leading: CircularProgressIndicator(), title: Text('Loading...'))
                : ListView.builder(
                    itemCount: services.length,
                    itemBuilder: (con, ind) {
                      return ExpansionTile(
                          title: Text('${services[ind]['name']}',
                              style: TextStyle(color: Colors.black)),
                          children:
                              List.generate(services[ind]['services'].length, (ii) {
                            return CheckboxListTile(
                                title: Text('${services[ind]['services'][ii]}',
                                    style: TextStyle(color: Colors.green[900])),
                                value: selections[ind] == ii,
                                onChanged: (b) {
                                  setState(() {
                                    selections[ind] = ii;
                                  });
                                });
                          }).toList());
                    }));
      }

Scr

0 голосов
/ 24 января 2020

просто используйте этот плагин https://pub.dev/packages/flutter_radio_button_group

и используйте его так:

FlutterRadioButtonGroup(
      items: [
        /*put your items here*/
        "Banana",
        "Mango",
        "Apple",
        "Pineapple",
      ],
      onSelected: (String selected) {
        print("Selected: $selected");
      }),
)

надеюсь, что это помогло.

...