Unable to Achieve Full Sidebar Color with AnimatedContainer in Flutter

Question

---

Body:

I'm working on a Flutter application with a sidebar that changes width on hover. I want to achieve a full-color effect for the sidebar items when they are selected. However, when I apply color to the AnimatedContainer widget, it seems to mess up the design.

Here's the relevant code for the HomeScreen widget:

import 'package:SolidCheck/core/constants/app_colors.dart';
import 'package:SolidCheck/core/constants/side_bar_menu_icons.dart';
import 'package:SolidCheck/core/utils/form_contents/form_contents.dart';
import 'package:SolidCheck/ui/screens/dbs/views/main/applicant_main.dart';
import 'package:SolidCheck/ui/screens/main/main.dart';
import 'package:SolidCheck/ui/widgets/widgets/custom_app_bar.dart';
import 'package:SolidCheck/ui/widgets/widgets/get_side_bar_border_radius.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _isHovered = false;
  int _selectedSidebarIndex = 0;

  void _setHovered(bool isHovered) {
    setState(() {
      _isHovered = isHovered;
    });
  }

  Widget _buildSidebarItem(String assetPath, String title, int index) {
    final isSelected = index == _selectedSidebarIndex;
    return GestureDetector(
      onTap: () {
        setState(() {
          _selectedSidebarIndex = index;
        });
      },
      child: SizedBox(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: getBorderRadius(_selectedSidebarIndex, index),
            color:
                isSelected ? AppColors.kWhiteColor : AppColors.sideBarMenuColor,
          ),
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(width: 20.0),
              SvgPicture.asset(
                assetPath,
                width: 20.0,
                height: 20.0,
                color: AppColors.kSideMenuIconColor,
              ),
              if (_isHovered || isSelected) ...[
                const SizedBox(width: 16.0),
                Expanded(
                  child: Text(
                    title,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: isSelected ? AppColors.kBlueColor : Colors.white,
                    ),
                    textAlign: TextAlign.left,
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildContent(int index) {
    switch (index) {
      case 0:
        return const HomeMainScreen();
      case 1:
        return const ApplicantMainScreen();
      case 2:
        return FormContents.buildDBSFormContent();
      case 3:
        return FormContents.buildBasicDisclosureContent();
      case 4:
        return FormContents.buildReferenceCheckContent();
      case 5:
        return FormContents.buildRightToWorkContent();
      case 6:
        return FormContents.buildQualificationContent();
      case 7:
        return FormContents.buildIDContent();
      default:
        return const HomeMainScreen();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(isAdminActive: false),
      body: Row(
        children: [
          MouseRegion(
            onEnter: (_) => _setHovered(true),
            onExit: (_) => _setHovered(false),
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              width: _isHovered ? 200.0 : 60.0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _buildSidebarItem(
                      SideBarMenuIcons.applicantSideMenuIcon8, 'Home', 0),
                  _buildSidebarItem(
                      SideBarMenuIcons.applicantSideMenuIcon1, 'Overview', 1),
                  _buildSidebarItem(
                      SideBarMenuIcons.applicantSideMenuIcon7, 'DBS Form', 2),
                  _buildSidebarItem(
                      SideBarMenuIcons.applicantSideMenuIcon6, 'Disclosure', 3),
                  _buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon5,
                      'Reference Check', 4),
                  _buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon4,
                      'Right to Work', 5),
                  _buildSidebarItem(SideBarMenuIcons.applicantSideMenuIcon3,
                      'Qualification', 6),
                  _buildSidebarItem(
                      SideBarMenuIcons.applicantSideMenuIcon2, 'ID', 7),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 6,
            child: _buildContent(_selectedSidebarIndex),
          ),
        ],
      ),
    );
  }
}

Problem: When I set the color for the AnimatedContainer, the design does not appear as expected. The sidebar does not maintain the intended full-color effect for selected items, and the design seems to be disrupted.

Expected Result: I want the sidebar item to show a full color when selected, and the sidebar to transition smoothly between different widths without affecting the design of the items.

What I've Tried:

• Adjusted the color property in the BoxDecoration of Container.
• Modified the width property of AnimatedContainer.

Any suggestions or solutions on how to fix this issue?

---