car_customer_app/lib/views/dashboard/fragments/providers_fragment.dart

import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/config/routes.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/utils/navigator.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: MyColors.backgroundColor,
      width: double.infinity,
      height: double.infinity,
      child: Column(
        children: [
          80.height,
          BuildServices(),
          5.height,
          Expanded(
            child: Container(
              child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: 30,
                  itemBuilder: (BuildContext context, int index) {
                    return InkWell(
                      onTap: () {
                        navigateWithName(context, AppRoutes.bookProviderAppView);
                      },
                      child: ProviderDetailsCard(),
                    );
                  }),
            ),
          ),
        ],
      ),
    );
  }
}

class BuildServices extends StatelessWidget {
  const BuildServices({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.symmetric(horizontal: 8),
                width: 85,
                decoration: BoxDecoration(
                  color: index < 2 ? MyColors.darkIconColor : null,
                  border: Border.all(
                    color: index < 2 ? MyColors.darkIconColor : MyColors.primaryColor,
                    width: 2,
                  ),
                ),
                child: "Oil Services".toText(
                  fontSize: 12,
                  color: index < 2 ? MyColors.white : null,
                ),
              ),
            );
          }),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.only(
          bottom: 10,
          left: 21,
          right: 21,
        ),
        child: Row(
          children: [
            Image.asset(
              MyAssets.bnCar,
              width: 80,
              height: 85,
              fit: BoxFit.cover,
            ),
            12.width,
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            "Al Ahmed Maintenance".toText(fontSize: 16, isBold: true),
                            Row(
                              children: [
                                "Location:".toText(color: MyColors.lightTextColor, fontSize: 12),
                                2.width,
                                "9.5km".toText(fontSize: 12),
                              ],
                            ),
                          ],
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          "4.9".toText(
                            isUnderLine: true,
                            isBold: true,
                            fontSize: 12,
                          ),
                          2.width,
                          MyAssets.starIcon.buildSvg(width: 12),
                        ],
                      ),
                    ],
                  ),
                  8.height,
                  Row(
                    children: [
                      Expanded(
                        child: Column(
                          children: [
                            Row(
                              children: [
                                MyAssets.maintenanceIcon.buildSvg(),
                                8.width,
                                "Maintenance".toText(
                                  fontSize: 14,
                                  isBold: true,
                                ),
                              ],
                            ),
                            Row(
                              children: [
                                MyAssets.modificationsIcon.buildSvg(),
                                8.width,
                                "Accessories and Modification".toText(
                                  fontSize: 14,
                                  isBold: true,
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ).toWhiteContainer(width: double.infinity, allPading: 12));
  }
}