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!

Feel free to adjust the details as needed before posting!