0

Here I've one service page where I've displayed all the services, and there I can select multiple services. but I want to select only one service. I've used the checkbox Listitle for the service selection. I want that user can select only one service not multiple services at a time.

Here is code i've tried :

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),
    );
  }
}
1

1 Answer 1

2

UPDATED

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

Sign up to request clarification or add additional context in comments.

8 Comments

appreciate your answer but can you please send the answer based on my code. your little help can make my day
add an int variable selected as a global variable and change it on changed function inside your checkbox list tile !
but it's not working can you suggest me something else or can implement your current solution in my existing code.
You didn't posted counties or sub categories etc !!
what is bspserives and sub category.... ! You are not saying clearer ! Say one thing you want to show a root list and sublist of services !?? If yes what is root list item (Expansion List tile title) ??
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.