Appbar color doesn't change in flutter

I’m new to flutter, I’m currently learning, I’m trying to change the color of appbar but impossible. I followed a lot of leads but nothing works (it is transparent).
I would like to have a left sidebar (height 100%) and an appbar on white color. It’s ok for the sidebar but not for the appbar

mainlayout.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'appbar.dart';

class MainLayout extends StatefulWidget {
final Widget content;

const MainLayout({required this.content, Key? key}) : super(key: key);

@override
_MainLayoutState createState() => _MainLayoutState();
}

class _MainLayoutState extends State<MainLayout> {
bool isMenuVisible = true; 

@override
Widget build(BuildContext context) {
bool isMobile = MediaQuery.of(context).size.width < 768;
if (isMobile && isMenuVisible) {
  setState(() {
    isMenuVisible = false;
  });
}

return Scaffold(
  body: Row(
    children: [
      if (isMenuVisible)
         Container(
          width: 250,
          height: MediaQuery.of(context).size.height, 
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
              right: BorderSide(
                color: const Color.fromARGB(255, 223, 234, 242),
                width: 1, 
              ),
            ),
          ),
          child: Column(
            children: [
               Container(
                padding: const EdgeInsets.all(16), 
                child: Image.asset(
                  'assets/images/logo.png', 
                  height: 80, 
                ),
              ),
              NavigationItem(
                iconData: Icons.home,
                title: "Home",
                route: '/home',
              ),
              NavigationItem(
                iconData: Icons.child_care,
                title: "User",
                route: '/user',
              ),
              NavigationItem(
                iconData: Icons.list,
                title: "Sections",
                route: '/sections',
              ),
            ],
          ),
        ), 
      Expanded(
        child: Container(
          color: const Color.fromARGB(255, 245, 247, 250), 
          child: Column(
            children: [
              CustomAppBar(
                title: '',
                backgroundColor: Colors.white,
                onMenuTap: () {
                  setState(() {
                    isMenuVisible = !isMenuVisible;
                  });
                },
              ),
              Expanded(
                child: widget.content,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);
}
}

class NavigationItem extends StatefulWidget {
final IconData iconData;
final String title;
final String route;

const NavigationItem({super.key, required this.iconData, required this.title, required this.route});

@override
_NavigationItemState createState() => _NavigationItemState();
}

class _NavigationItemState extends State<NavigationItem> {
bool isHover = false;

@override
Widget build(BuildContext context) {
bool isActive = ModalRoute.of(context)?.settings.name == widget.route;

return GestureDetector(
  onTap: () {
    Get.toNamed(widget.route);
  },
  child: MouseRegion(
    cursor: SystemMouseCursors.click,
    onHover: (event) {
      setState(() {
        isHover = true;
      });
    },
    onExit: (event) {
      setState(() {
        isHover = false;
      });
    },
    child: Container(
      padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 12),
      margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
      decoration: BoxDecoration(
        color: isActive || isHover
            ? const Color.fromARGB(255, 198, 253, 250)
            : Colors.transparent,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        children: [
          Icon(
            widget.iconData,
            color: isHover || isActive ? const Color.fromRGBO(38, 205, 197, 1) : const Color.fromARGB(221, 132, 131, 131),
            size: 25,
          ),
          SizedBox(width: 16),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 10), 
              child: Text(
                widget.title,
                style: GoogleFonts.raleway(
                  color: isHover || isActive
                      ? Color.fromRGBO(38, 205, 197, 1)
                      : const Color.fromARGB(221, 132, 131, 131),
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);
}
}

And the Appbar file

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:lucide_icons/lucide_icons.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final String title; 
final Function? onMenuTap; 
final Function? onThemeToggle;
final Color backgroundColor;

const CustomAppBar({
Key? key,
required this.title,
this.onMenuTap,
this.onThemeToggle,
this.backgroundColor = Colors.white,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return AppBar(
  backgroundColor: backgroundColor, 
  elevation: 1,
  automaticallyImplyLeading: false,
  title: Row(
    children: [
      
      InkWell(
        onTap: () => onMenuTap?.call(),
        child: Icon(
          LucideIcons.menu,
          color: Colors.black87,
        ),
      ),
      const SizedBox(width: 16),
      
      Text(
        title,
        style: GoogleFonts.raleway(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.black87,
        ),
      ),
    ],
  ),
  actions: [
   
    IconButton(
      icon: Icon(
        Theme.of(context).brightness == Brightness.dark
            ? LucideIcons.sun
            : LucideIcons.moon,
        color: Colors.black87,
      ),
      onPressed: () => onThemeToggle?.call(),
    ),
    const SizedBox(width: 8),

    PopupMenuButton(
      icon: CircleAvatar(
        backgroundImage: AssetImage("assets/images/avatar.png"), 
      ),
      itemBuilder: (context) => [
        PopupMenuItem(
          value: 'profile',
          child: Text("Mon Profil"),
        ),
        PopupMenuItem(
          value: 'logout',
          child: Text("Déconnexion"),
        ),
      ],
      onSelected: (value) {
        if (value == 'profile') {
          Get.toNamed('/profile');
        } else if (value == 'logout') {
          Get.offAllNamed('/login');
        }
      },
    ),
    const SizedBox(width: 16),
  ],
);
}

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

Does anyone see where this is coming from and please explain to me?

Thanks a lot