ChangePrefferedStaffScreen.dart

import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../customWidgets/InkWellNoSplash.dart';
import '../theme/app_theme.dart';
import 'SortByScreen.dart';

class Changeprefferedstaffscreen extends StatefulWidget {
  Changeprefferedstaffscreen({super.key});

  @override
  State<Changeprefferedstaffscreen> createState() => _ChangeprefferedstaffscreenState();
}

class _ChangeprefferedstaffscreenState extends State<Changeprefferedstaffscreen> {
  var topHorizontalItem_Selected = 0;
  var topHorizontalItem_List = [
    'Hair Wash Small',
    "Hair Wash and Dry",
    "Hair Wash and Dry",
    "Hair Wash and Dry",
    "Hair Wash and Dry",
    "Hair Wash and Dry",
  ];

  var staffs = ["Ahmed", "Abu Talha", "Hadi", "Syed"];
  var staffsJob = ["Professional Trainer", 'Professional Therapist,\nTrainer', "Professional Trainer", "Professional Trainer"];
  var staffImages = [
    "https://firebasestorage.googleapis.com/v0/b/masajid-static-2.appspot.com/o/f5828eab255dd7971f94bdb4805609f6.png?alt=media&token=5592498a-9389-4364-ab7e-29050b79a7af",
    "https://firebasestorage.googleapis.com/v0/b/masajid-static-2.appspot.com/o/9bc3dff50bf821da68388d1e9928376a.png?alt=media&token=4e757869-9df4-4978-94da-19dde2857528",
    "https://firebasestorage.googleapis.com/v0/b/masajid-static-2.appspot.com/o/65792ecac163a4cf15880aca044cfb31.png?alt=media&token=66894e04-9dea-4790-8860-417981c8dbe1",
    "https://firebasestorage.googleapis.com/v0/b/masajid-static-2.appspot.com/o/0a6163ccf9073b3d189b85d0d871cef2.png?alt=media&token=b76ba919-c5cd-40ec-a0e1-6548e78ac5a5"
  ];

  var selectedStaff = "Ahmed";
  var favs = ["Ahmed"];

  final GlobalKey targetKey = GlobalKey();
  final scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xFFEFEFEF),
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Container(
            padding: EdgeInsets.only(top: max(MediaQuery.of(context).padding.top, 60)),
            color: Color(0xFF460873),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                InkWellNoSplash(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(left: 11, bottom: 24, right: 11),
                      child: Image.asset(
                        "assets/images/img_9.png",
                        width: 26,
                      ),
                    )),
                Text(
                  'Change Preferred Staff',
                  style: TextStyle(
                    color: Color(0xFFF8F8F8),
                    fontSize: 18,
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.w600,
                  ),
                )
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 15, top: 15, bottom: 15, right: 15),
            child: Text(
              'Select your preferred staff for each service',
              style: TextStyle(
                color: Color(0xFF403A3B),
                fontSize: 14,
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.w400,
                height: 0,
              ),
            ),
          ),
          SingleChildScrollView(
            controller: scrollController,
            scrollDirection: Axis.horizontal,
            child: Padding(
              padding: const EdgeInsets.only(left: 7.5, right: 7, bottom: 15),
              child: Row(
                children: [
                  for (int i = 0; i < topHorizontalItem_List.length; i++) topHorizontalItem(topHorizontalItem_List[i], i),
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              decoration: ShapeDecoration(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
                ),
              ),
              child: Column(
                children: [
                  sortByBox(),
                  Expanded(
                    child: ListView.builder(
                        itemCount: (((staffs.length + 1) ~/ 2)),
                        padding: EdgeInsets.only(top: 10, bottom: 30),
                        itemBuilder: (BuildContext context, final int i) {
                          if (i < ((staffs.length + 1) ~/ 2))
                            return Padding(
                              padding: const EdgeInsets.only(left: 6, right: 6,bottom: 14-6),
                              child: Row(
                                children: [
                                  Expanded(child: staffWidget(staffs[i * 2], staffImages[i * 2],staffsJob[i * 2])),
                                  if (staffs.elementAtOrNull((i * 2) + 1) != null)
                                    Expanded(
                                      child: staffWidget(staffs[(i * 2) + 1], staffImages[(i * 2) + 1],staffsJob[(i * 2) + 1]),
                                    )
                                  else
                                    Expanded(child: Container()),
                                ],
                              ),
                            );
                          else
                            return Container();
                        }),
                  ),
                ],
              ),
            ),
          )
        ]));
  }

  Widget topHorizontalItem(String name, int index) {
    return InkWellNoSplash(
      key: topHorizontalItem_Selected == index ? targetKey : null,
      onTap: () {
        setState(() {
          topHorizontalItem_Selected = index;
          scrollToTarget();
        });
      },
      child: Container(
        padding: EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
        margin: EdgeInsets.only(left: 7.5, right: 7.5),
        decoration: BoxDecoration(border: Border.all(color: Color(topHorizontalItem_Selected == index ? 0xFF460873 : 0xFFDFD4E7), width: 1), borderRadius: BorderRadius.circular(10)),
        child: Center(
          child: Text(
            name,
            style: TextStyle(
              color: Color(topHorizontalItem_Selected == index ? 0xFF460873 : 0xFF403A3B),
              fontSize: 14,
              fontFamily: 'Montserrat',
              fontWeight: topHorizontalItem_Selected == index ? FontWeight.w600 : FontWeight.w400,
              height: 0,
            ),
          ),
        ),
      ),
    );
  }

  void scrollToTarget() {
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      final context = targetKey.currentContext;
      if (context != null) {
        RenderBox? targetRenderObject = context.findRenderObject() as RenderBox;
        if (targetRenderObject != null) {
          final screenSize = MediaQuery.of(context).size;
          final globalOffset = targetRenderObject.localToGlobal(Offset.zero);
          final itemRect = Rect.fromLTWH(globalOffset.dx, globalOffset.dy, targetRenderObject.size.width, targetRenderObject.size.height);
          final targetOffset = targetRenderObject.localToGlobal(Offset.zero);
          if (itemRect.top >= 0 && itemRect.left >= 0 && itemRect.right <= screenSize.width && itemRect.bottom <= screenSize.height) {
          } else {
            var extra = 0;
            if (topHorizontalItem_Selected != topHorizontalItem_List.length) extra = 30;
            scrollController.offset + (itemRect.right - screenSize.width);

            var scroll = scrollController.offset + (itemRect.right - screenSize.width) + extra;
            if (scroll < 0) scroll = 0;

            scrollController.animateTo(
              scroll,
              duration: Duration(milliseconds: 500),
              curve: Curves.ease,
            );
          }
        } else {}
      } else {}
    });
  }

  Widget sortByBox() {
    return InkWellNoSplash(
      onTap: () async {
        var selected = await showModalBottomSheet<String?>(
          backgroundColor: AppColors.transparent,
          enableDrag: true,
          isScrollControlled: true,
          context: context,
          builder: (BuildContext context) {
            return Sortbyscreen();
          },
        ).then((value) {});
      },
      child: Container(
        margin: EdgeInsets.only(left: 12, right: 12, top: 13, bottom: 17),
        padding: EdgeInsets.only(
          left: 12,
          right: 12,
        ),
        height: 35,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(
            side: BorderSide(
              width: 1,
              strokeAlign: BorderSide.strokeAlignOutside,
              color: Color(0xFFD3C4DF),
            ),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
        child: Row(
          children: [
            Text(
              'Sort By Stars',
              style: TextStyle(
                color: Color(0xFF403A3B),
                fontSize: 12,
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.w400,
                height: 0,
              ),
            ),
            Spacer(),
            Image.asset("assets/images/Vector.png"),
          ],
        ),
      ),
    );
  }

  Widget staffWidget(String staff, String staffImag, String job) {
    return InkWellNoSplash(
      onTap: () {
        setState(() {
          selectedStaff = staff;
        });
      },
      child: Container(
        padding: EdgeInsets.only(left: 6, right: 6, top: 6),
        width: double.infinity,
        decoration: selectedStaff == staff
            ? ShapeDecoration(
                color: Color(0x33FDB731),
                shape: RoundedRectangleBorder(
                  side: BorderSide(width: 1, color: Color(0xFFFDB731)),
                  borderRadius: BorderRadius.circular(15),
                ),
              )
            : ShapeDecoration(
          color: Colors.transparent,
          shape: RoundedRectangleBorder(
            side: BorderSide(width: 1, color:  Colors.transparent),
            borderRadius: BorderRadius.circular(15),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Stack(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: CachedNetworkImage(
                    imageUrl: staffImag,
                    fit: BoxFit.cover,
                    // color: Colors.black,
                    // colorBlendMode: BlendMode.softLight,
                    width: double.infinity,
                    height: 167,
                  ),
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: InkWellNoSplash(
                    onTap: () {
                      setState(() {
                        if (favs.contains(staff)) {
                          favs.remove(staff);
                        } else {
                          favs.add(staff);
                        }
                      });
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(right: 5, top: 8),
                      child: Container(
                        width: 31,
                        height: 31,
                        padding: EdgeInsets.all(7),
                        decoration: ShapeDecoration(
                          color: Color(0xFFFDF9FF),
                          shape: RoundedRectangleBorder(
                            side: BorderSide(width: 1, color: Color(0xFFDFD4E7)),
                            borderRadius: BorderRadius.circular(25),
                          ),
                        ),
                        child: Image.asset(favs.contains(staff) ? "assets/images/img_14.png" : "assets/images/img_17.png",),
                      ),
                    ),
                  ),
                )
              ],
            ),

            Padding(
              padding: const EdgeInsets.only(left: 5,right: 10,top: 9,),
              child: Row(
                children: [

                  Text(
                    staff,
                    style: TextStyle(
                      color: Color(0xFF403A3B),
                      fontSize: 14,
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w500,

                    ),
                  ),
                  Spacer(),
                  Image.asset("assets/images/img_16.png",width: 24,),
                  Text(
                    '5',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Color(0xFF403A3B),
                      fontSize: 12,
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w400,

                    ),
                  ),
                ],
              ),
            ),

            Padding(
              padding: const EdgeInsets.only(left: 5,right: 0,top: 8,bottom: 5),
              child: SizedBox(
                height: 40,
                child: Text(
                  job,
                  maxLines: 2,
                  style: TextStyle(
                    color: Color(0xFF6D6D6D),
                    fontSize: 14,
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.w400,

                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}