How can I make a hour picker for each different day

43 Views Asked by At

I want to make the seller choose the hours that he/she is available at, but I cannot find a logical way of implementing it for each day. This version is adding the hours to the same list.

sellerAddPage.dart

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 5),
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        const SizedBox(width: 10),
          Column(
            children: [
              Text(
                "Monday",
                style: GoogleFonts.inter(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  color: Colors.white
                ),
              ),
              const Amenities()
            ],
        ),
        const SizedBox(width: 10),
        Column(
          children: [
            Text(
              "Tuesday",
              style: GoogleFonts.inter(
                fontSize: 16,
                fontWeight: FontWeight.w500,
                color: Colors.white
              ),
            ),
            const Amenities()
          ],
        ),

Amenities.dart (hour picker)

class _AmenitiesState extends State<Amenities> {

  List<CheckContainerModel> checkContainers = [
    CheckContainerModel(title: '18:00-19:00', isCheck: false),
    CheckContainerModel(title: '19:00-20:00', isCheck: false),
    CheckContainerModel(title: '20:00-21:00', isCheck: false),
    CheckContainerModel(title: '21:00-22:00', isCheck: false),
    CheckContainerModel(title: '22:00-23:00', isCheck: false),
    CheckContainerModel(title: '23:00-00:00', isCheck: false),
    CheckContainerModel(title: '00:00-01:00', isCheck: false),
    CheckContainerModel(title: '01:00-02:00', isCheck: false),
  ];

  List<CheckContainerModel> selectedHours = [];

  void onCheckTap(CheckContainerModel container) {
    final index = checkContainers.indexWhere(
      (element) => element.title == container.title,
    );

    bool previousIsCheck = checkContainers[index].isCheck;
    checkContainers[index].isCheck = !previousIsCheck;
    if (checkContainers[index].isCheck) {
      selectedHours.add(checkContainers[index]);
    } else {
      selectedHours.removeWhere(
        (element) => element.title == checkContainers[index].title
      );
    }
    selectedHours.forEach((element) {print(element.title);});
    setState(() {});
  }

this is how it looks

I want to make the seller to be able to choose different hours for different days and upload that to firestore

0

There are 0 best solutions below