car_customer_app/lib/views/book_provider_app_view.dart

import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/common_widgets/provider_details_card.dart';
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.dart';

class BookProviderAppView extends StatefulWidget {
  const BookProviderAppView({Key? key}) : super(key: key);

  @override
  State<BookProviderAppView> createState() => _BookProviderAppViewState();
}

class _BookProviderAppViewState extends State<BookProviderAppView> {
  bool isReview = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        title: "Appointment",
        profileImageUrl: MyAssets.bnCar,
        isRemoveBackButton: false,
        isDrawerEnabled: false,
      ),
      body: Container(
        color: MyColors.backgroundColor,
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            Expanded(
              child: ListView(
                children: [
                  ProviderDetailsCard(
                    onCardTapped: () {},
                    providerImageUrl: MyAssets.bnCar,
                    providerLocation: "3km",
                    providerName: "Al Ahmed Maintenance",
                    providerRatings: "4.9",
                  ),
                  12.height,
                  isReview ? ReviewAppointmentSection() : ServicesSelectionSection(),
                  10.height,
                ],
              ),
            ),
            10.height,
            Padding(
              padding: const EdgeInsets.only(bottom: 10, left: 21, right: 21),
              child: ShowFillButton(
                title: "Book Appointment",
                maxWidth: double.infinity,
                onPressed: () {
                  isReview = !isReview;
                  setState(() {});
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ServicesSelectionSection extends StatelessWidget {
  const ServicesSelectionSection({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<DropValue> dropList = [
      DropValue(0, "Maintenance", ""),
      DropValue(1, "Car Wash", ""),
      DropValue(2, "Monthly Checkup", ""),
      DropValue(3, "Friendly Visit", ""),
      DropValue(4, "Muftaa", ""),
    ];
    return Container(
      padding: const EdgeInsets.only(bottom: 10, left: 21, right: 21),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          "Select services you want".toText(fontSize: 18, isBold: true),
          8.height,
          DropdownField(
            (DropValue value) {},
            list: dropList,
            hint: "Select service type",
          ),
          8.height,
          DropdownField(
            (DropValue value) {},
            list: dropList,
            hint: "Select service type",
          ),
          8.height,
          DropdownField(
            (DropValue value) {},
            list: dropList,
            hint: "Select service type",
          ),
          22.height,
          "Select date and time".toText(fontSize: 18, isBold: true),
          8.height,
          DropdownField(
            (DropValue value) {},
            list: dropList,
            hint: "Select service type",
          ),
          22.height,
          "Available slots".toText(fontSize: 15, isBold: true),
          8.height,
          BuildTimeSlots(),
          22.height,
          "Total Amount".toText(fontSize: 18, isBold: true),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              "3000".toText(fontSize: 20, isBold: true),
              "SAR".toText(fontSize: 10, isBold: true, color: MyColors.lightTextColor),
            ],
          ),
          10.height,
        ],
      ).toWhiteContainer(width: double.infinity, allPading: 12),
    );
  }
}

class ReviewAppointmentSection extends StatelessWidget {
  const ReviewAppointmentSection({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(bottom: 10, left: 21, right: 21),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          "Review Appointment".toText(fontSize: 18, isBold: true),
          15.height,
          "Services".toText(fontSize: 14, isBold: true, color: MyColors.lightTextColor),
          "Car Engine Check".toText(fontSize: 18, isBold: true),
          13.height,
          "Date and Time".toText(fontSize: 14, isBold: true, color: MyColors.lightTextColor),
          "2 Feb, 2023 at 09:00am".toText(fontSize: 18, isBold: true),
          13.height,
          "Total Amount".toText(fontSize: 14, isBold: true, color: MyColors.lightTextColor),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              "3000".toText(fontSize: 20, isBold: true),
              "SAR".toText(fontSize: 10, isBold: true, color: MyColors.lightTextColor),
            ],
          ),
          100.height,
        ],
      ).toWhiteContainer(width: double.infinity, allPading: 12),
    );
  }
}

class BuildTimeSlots extends StatelessWidget {
  const BuildTimeSlots({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 37,
      width: double.infinity,
      child: ListView.builder(
          itemCount: 20,
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            return InkWell(
              onTap: () {},
              child: Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(right: 8),
                width: 50,
                decoration: BoxDecoration(
                  color: index < 1 ? MyColors.darkIconColor : null,
                  border: Border.all(
                    color: index < 1 ? MyColors.darkIconColor : MyColors.primaryColor,
                    width: 2,
                  ),
                ),
                child: "09:00".toText(
                  fontSize: 12,
                  color: index < 1 ? MyColors.white : null,
                ),
              ),
            );
          }),
    );
  }
}