'side menu is not getting displayed
My sidemenu is not getting displayed and I don't know why. I have no errors and the code should be fine, too. I am still a beginner, but in my opinion it should actually work.
Here u can see the image of the code - the sidemenu is not getting displayed:
I really hope that u can help me, because I have no clue why it is not working at all.
vertical_menu_item.dart code:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../constants/controller.dart';
import '../constants/style.dart';
import 'custom_text.dart';
class VerticalMenuItem extends StatelessWidget {
final String? itemName;
final VoidCallback? onTap;
const VerticalMenuItem({Key? key, this.itemName, this.onTap}) : super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
onHover: (value){
value
? menuController.onHover(itemName!) //when hovering return item name
: menuController.onHover("not hovering"); //not hovering return "not hovering"
},
child: Obx(() => Container(
color: menuController.isHovering(itemName!)
? lightGrey.withOpacity(.1) //if hovered then change background colour
: Colors.transparent, // not hovered = transparent
child: Row (
children: [
Visibility(
visible: menuController.isHovering(itemName!) || menuController.isActive(itemName!),
child: Container(
width: 3,
height: 72,
color: dark,
),
maintainSize: true,
maintainState: true,
maintainAnimation: true,
),
Expanded(child: Column( //here we use Column instead of having everything in a row bcs it's vertical menu
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(16),
child: menuController.returnIconFor(itemName!), //return the icon for the item
),
if(!menuController.isActive(itemName!)) // not active widget
Flexible(child: CustomText(
text: itemName,
color:
menuController.isHovering(itemName!) ? dark : lightGrey, //change when hovering from lightgrey to dark
))
else
Flexible(child: CustomText(
text: itemName,
color: dark, //active widget = dark
size: 18,
weight: FontWeight.bold,
))
],
))
],
),
)),
);
}
}
horizontal_menu_item.dart code:
import 'package:fitness_webserver/constants/controller.dart';
import 'package:fitness_webserver/constants/style.dart';
import 'package:fitness_webserver/widgets/custom_text.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HorizontalMenuItem extends StatelessWidget {
final String? itemName;
final VoidCallback? onTap;
const HorizontalMenuItem({Key? key, this.itemName, this.onTap }) : super(key: key);
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return InkWell( // using InkWell for on hover property
onTap: onTap,
onHover: (value){
value ?
menuController.onHover(itemName!) //when it is hovering return item name
:menuController.onHover("not hovering"); //not hovering return "not hovering"
},
child: Obx(() => Container( //Obx for observing changes
color: menuController.isHovering(itemName!)
? lightGrey.withOpacity(.1) //if hovered then change background colour
: Colors.transparent, // not hovered = transparent
child: Row(
children: [
Visibility(
visible: menuController.isHovering(itemName!) || menuController.isActive(itemName!),
child: Container(
width: 6,
height: 40,
color: dark,
),
maintainSize: true,
maintainState: true,
maintainAnimation: true,
),
SizedBox(width: _width / 88),
Padding(
padding: const EdgeInsets.all(16),
child: menuController.returnIconFor(itemName!), //return the icon for the itemName
),
if(!menuController.isActive(itemName!)) // not active widget
Flexible(child: CustomText(
text: itemName,
color:
menuController.isHovering(itemName!) ? dark : lightGrey, //change when hovering from lightgrey to dark
))
else
Flexible(child: CustomText(
text: itemName,
color: dark, //active widget = dark
size: 18,
weight: FontWeight.bold,
))
],
)
))
);
}
}
side_menu_item.dart code:
import 'package:fitness_webserver/helpers/responsiveness.dart';
import 'package:fitness_webserver/widgets/horizontal_menu_item.dart';
import 'package:fitness_webserver/widgets/vertical_menu_item.dart';
import 'package:flutter/material.dart';
class SideMenuItem extends StatelessWidget {
final String? itemName;
final VoidCallback? onTap;
const SideMenuItem({this.itemName, this.onTap, Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
if (ResponsiveWidget.isCustomScreen(context)) { //when we have customscreensize then return verticalmenuitem
return VerticalMenuItem(itemName: itemName, onTap: onTap,);
} else {
return HorizontalMenuItem(itemName: itemName, onTap: onTap,); //not customscreensize return Horizontalmenuitem
}
}
}
side_menu.dart code:
import 'package:fitness_webserver/constants/controller.dart';
import 'package:fitness_webserver/constants/style.dart';
import 'package:fitness_webserver/helpers/responsiveness.dart';
import 'package:fitness_webserver/routing/routes.dart';
import 'package:fitness_webserver/widgets/custom_text.dart';
import 'package:fitness_webserver/widgets/side_menu_item.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class SideMenu extends StatelessWidget {
const SideMenu({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return Container(
color: light,
child: ListView( children: [
if(ResponsiveWidget.isSmallScreen(context))
Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: 40,),
Row(
children: [
SizedBox(width: _width / 48),
Padding(padding: EdgeInsets.only(right: 12),
child: Image.asset("assets/icons/logo.png"),
),
Flexible(child: CustomText(
text: "Dash",
size: 20,
weight: FontWeight.bold,
color: active,
),
),
SizedBox(width: _width / 48),
],
),
SizedBox(height: 30,),
],
),
Divider(color: lightGrey.withOpacity(.1),),
Column(
mainAxisSize: MainAxisSize.min,
children: sideMenuItems.map((itemName) => SideMenuItem(
itemName: itemName == AuthenticationPageRoute ? "Log Out" : itemName,
onTap: () {
if (itemName == AuthenticationPageRoute) {
// TODO:: go to authentication page
}
if(!menuController.isActive(itemName)){
menuController.changeActiveitemTo(itemName);
if (ResponsiveWidget.isSmallScreen(context))
Get.back();
//TODO :: go to item name Route
}
},
)).toList(),
)
],
),
);
}
}
routes.dart code:
const OverViewPageRoute = "Overview";
const DriversPageRoute = "Drivers";
const ClientsPageRoute = "Clients";
const AuthenticationPageRoute = "Authentication"; // for log in and log out
List sideMenuItems = [
OverViewPageRoute,
DriversPageRoute,
ClientsPageRoute,
AuthenticationPageRoute
];
layout.dart code:
import 'package:fitness_webserver/helpers/responsiveness.dart';
import 'package:fitness_webserver/widgets/large_screen.dart';
import 'package:fitness_webserver/widgets/small_screen.dart';
import 'package:fitness_webserver/widgets/top_nav.dart';
import 'package:flutter/material.dart';
class SiteLayout extends StatelessWidget {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey, // need a key for the Scaffold
appBar: topNavigationBar(context, scaffoldKey),
drawer: Drawer(),
body: ResponsiveWidget(largeScreen: LargeScreen(), smallScreen: SmallScreen(),)
);
}
}
Edit: "Show us the code of the parent layout that calls all the other Screens(side and top naviagtion) I assume you had a layout with different flex sizes? – Davis"
I have added the code from layout.dart. I have found a mistake - I have forgotten to add "child: SideMenu()," in the drawer of the layout. It works now.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|