car_common_app/lib/widgets/common_widgets/app_bar.dart

import 'dart:developer';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:mc_common_app/classes/app_state.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/view_models/user_view_model.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color? backgroundColor;
  final double? elevation;
  final double? toolbarHeight;
  final String? title;
  final Color? titleColor;
  final bool? isTitleCenter;
  final Color? backIconColor;
  final List<Widget>? actions;
  final bool isRemoveBackButton;
  final String profileImageUrl;
  final bool isDrawerEnabled;
  final VoidCallback? onTap;
  final Function? onBackButtonTapped;
  final double? leadingWidth;

  const CustomAppBar({
    Key? key,
    this.title,
    this.isDrawerEnabled = false,
    this.profileImageUrl = "",
    this.isRemoveBackButton = false,
    this.backgroundColor,
    this.actions,
    this.backIconColor,
    this.elevation,
    this.toolbarHeight,
    this.isTitleCenter,
    this.titleColor,
    this.onTap,
    this.onBackButtonTapped,
    this.leadingWidth,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AppBar(
          automaticallyImplyLeading: false,
          leadingWidth: leadingWidth ?? 61,
          backgroundColor: backgroundColor ?? Colors.white,
          elevation: elevation ?? 0,
          centerTitle: isTitleCenter ?? true,
          scrolledUnderElevation: 0,
          toolbarHeight: toolbarHeight,
          leading: isDrawerEnabled
              ? InkWell(
                  onTap: onTap,
                  child: Row(
                    children: [
                      Consumer(builder: (BuildContext context, UserVM uvm, Widget? child) {
                        return profileImageUrl.isEmpty && AppState().getUser.data!.userInfo!.userLocalImage != null
                            ? Image.file(
                                AppState().getUser.data!.userInfo!.userLocalImage!,
                                width: 34,
                                height: 34,
                                fit: BoxFit.fill,
                              ).toCircle(borderRadius: 100)
                            : profileImageUrl.isEmpty && AppState().getUser.data!.userInfo!.userImageUrl != null
                                ? CachedNetworkImage(
                                        imageUrl: AppState().getUser.data!.userInfo!.userImageUrl,
                                        imageBuilder: (context, imageProvider) => Container(
                                              decoration: BoxDecoration(
                                                image: DecorationImage(
                                                  image: imageProvider,
                                                  fit: BoxFit.cover,
                                                ),
                                              ),
                                            ),
                                        placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
                                        errorWidget: (context, url, error) => const Icon(Icons.supervised_user_circle_outlined),
                                        fadeInCurve: Curves.easeIn,
                                        width: 34,
                                        height: 34,
                                        fit: BoxFit.fill,
                                        fadeInDuration: const Duration(milliseconds: 1000),
                                        useOldImageOnUrlChange: false)
                                    .toCircle(borderRadius: 100)
                                : Image.asset(
                                    MyAssets.carBanner,
                                    width: 34,
                                    height: 34,
                                    fit: BoxFit.fill,
                                  ).toCircle(borderRadius: 100);
                      }),
                      10.width,
                      SvgPicture.asset(MyAssets.dashboardDrawerIcon),
                    ],
                  ).paddingOnly(left: 21),
                )
              : isRemoveBackButton
                  ? null
                  : Row(
                      children: [
                        21.width,
                        const Icon(Icons.arrow_back_ios, color: Colors.black, size: 16)
                            .toContainer(
                          padding: const EdgeInsets.only(left: 5),
                          borderRadius: 100,
                          borderColor: MyColors.lightGreyEFColor,
                          isEnabledBorder: true,
                          height: 40,
                          width: 40,
                        )
                            .onPress(() {
                          if (onBackButtonTapped != null) {
                            onBackButtonTapped!();
                          } else {
                            Navigator.pop(context);
                          }
                        }),
                      ],
                    ),
          iconTheme: IconThemeData(
            color: backIconColor ?? Colors.black, //change your color here
          ),
          actions: actions,
          title: (title ?? "").toText(fontSize: 20),
        ),
        if (backgroundColor == null) const Divider(thickness: 1, height: 1)
      ],
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(60);
}