skip to Main Content

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

2

Answers


  1. AppBar is a Widget to be used as appBar parameter of Scaffold.

    But in your code, you didn’t use appBar parameter, and just put the CustomAppBar as a part widget of body.

    If it is intended behavior, you should be better to use Container as CustomAppBar.
    It is more flexible to customize.

    If you have to use AppBar, please pass it as appBar parameter.

    Login or Signup to reply.
  2. use surfaceTintColor property of the AppBar

    surfaceTintColor: backgroundColor;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search