如何从Flutter的Checkbox Listtile中仅选择一个复选框

时间:2020-01-24 05:09:04

标签: flutter checkbox dart flutter-layout flutter-dependencies

在这里,我有一个服务页面,其中显示了所有服务,在那里我可以选择多个服务。但我只选择一项服务。我已使用复选框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 个答案:

答案 0 :(得分:1)

已更新

WhenAnyValue()

Scr

答案 1 :(得分:-3)

只需使用此插件https://pub.dev/packages/flutter_radio_button_group

并像这样使用它:

A

希望有帮助。