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
AppBar
is aWidget
to be used asappBar
parameter ofScaffold
.But in your code, you didn’t use
appBar
parameter, and just put theCustomAppBar
as a part widget ofbody
.If it is intended behavior, you should be better to use
Container
asCustomAppBar
.It is more flexible to customize.
If you have to use
AppBar
, please pass it asappBar
parameter.use
surfaceTintColor
property of theAppBar