Question:
I’m working on a sidebar menu design in Flutter and I’m trying to replicate the look and feel shown in the design examples below. However, I’m not quite able to achieve the desired result with my current implementation.
Actual Design:
Achieved Design:
Here is the code I have written:
bool _isHovered = false;
int _selectedActivityLogIndex = 0;
int _selectedSidebarIndex = 0;
void _setHovered(bool isHovered) {
setState(() {
_isHovered = isHovered;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
MouseRegion(
onEnter: (_) => _setHovered(true),
onExit: (_) => _setHovered(false),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: _isHovered ? 200.0 : 60.0,
color: AppColors.sideBarMenuColor,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon1, 'Overview', 0),
_buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon7, 'DBS', 1),
_buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon6, 'Basic Disclosure', 2),
_buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon5, 'Reference Check', 3),
_buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon4, 'Right to Work', 4),
_buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon3, 'Qualification', 5),
_buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon2, 'ID', 6),
],
),
),
),
Expanded(
flex: 6,
child: SingleChildScrollView(
padding: const EdgeInsets.all(20.0),
child: _buildContent(_selectedSidebarIndex),
),
),
],
),
);
}
Widget _buildSidebarItem(String assetPath, String title, int index) {
final isSelected = index == _selectedSidebarIndex;
return GestureDetector(
onTap: () {
setState(() {
_selectedSidebarIndex = index;
});
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(isSelected ? 20.0 : 0.0),
topRight: Radius.circular(isSelected ? 20.0 : 0.0),
),
color: isSelected ? AppColors.kWhite : AppColors.sideBarMenuColor,
),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(width: 20.0),
SvgPicture.asset(
assetPath,
width: 20.0,
height: 20.0,
color: AppColors.kSideMenuIconColor,
),
if (_isHovered) ...[
const SizedBox(width: 16.0),
Expanded(
child: Text(
title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: isSelected ? AppColors.kBlueColor : Colors.white,
),
textAlign: TextAlign.left,
),
),
],
],
),
),
);
}
Problem:
I have implemented the sidebar menu, but the design does not match the provided examples. The achieved design doesn’t fully align with the provided reference designs. How can I modify my code or approach to achieve the design shown in the examples?
Any help or suggestions would be greatly appreciated!
The idea is to change the previous and the next index of the selected item’s border, and change the selected color to white. I wrap every title inside a container to give it a curve, then inside another container to make that curve visible (because the inside container color is blue matching the drawer color, we need the outer container to make the curve visible). You can replace ListTitle with any widget, I use it for quick prototyping.
import 'package:flutter/material.dart';
class IconButtonRow {
final String title;
IconButtonRow({required this.title});
}
final buttons = [
IconButtonRow(title: "the"),
IconButtonRow(title: "quick"),
IconButtonRow(title: "brown"),
IconButtonRow(title: "fox"),
IconButtonRow(title: "jumped"),
IconButtonRow(title: "over"),
IconButtonRow(title: "the"),
IconButtonRow(title: "lazy"),
IconButtonRow(title: "dog"),
];
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
BorderRadius getBorderRadius(int? selected, int currentButton) {
if (selected == null) {
return BorderRadius.zero;
}
if (selected == currentButton - 1) {
return const BorderRadius.only(
topRight: Radius.circular(30),
);
}
if (selected == currentButton + 1) {
return const BorderRadius.only(
bottomRight: Radius.circular(30),
);
}
return BorderRadius.zero;
}
class _HomePageState extends State<HomePage> {
int? selected;
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
backgroundColor: Colors.blue,
child: Column(
children: [
for (var i = 0; i < buttons.length; i++)
Container(
color: Colors.white,
child: Container(
decoration: BoxDecoration(
color: selected == i ? Colors.white : Colors.blue,
borderRadius: getBorderRadius(selected, i),
),
child: ListTile(
title: Text(
buttons[i].title,
style: TextStyle(
color: selected == i ? Colors.blue : Colors.white,
),
),
onTap: () {
setState(() {
selected = i;
});
},
),
),
),
],
),
),
body: const Column(),
);
}
}
Result: click on a title to see change.
0