CODEWITHSUNDEEP
fluttercolorsgradientflutter-bottomnavigation
Mohamad Bdeir
Mohamad Bdeir

Reputation: 15

Flutter add gradient to selectedItemColor in BottomNavigationBar

I want to be able to add a gradient in the selectedItemColor field.

bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite), label: 'Favorite'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Setting'),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: 'idk'),
        ],
        selectedItemColor: Colors.black,
        unselectedItemColor: Theme.of(context).colorScheme.onBackground,
        showUnselectedLabels: true,
      ),

Upvotes: 0

Views: 54

Answers (1)

feyzforall
feyzforall

Reputation: 26

You can use ShaderMask.

class GradientIcon extends StatelessWidget {
  const GradientIcon({
    super.key,
    required this.icon,
    required this.isSelected,
  });

  final IconData icon;
  final bool isSelected;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return RadialGradient(
          center: Alignment.topLeft,
          radius: 1.0,
          colors: isSelected
              ? [
                  Colors.yellow,
                  Colors.deepOrange.shade900,
                ]
              : [
                  Colors.black,
                  Colors.black,
                ],
          tileMode: TileMode.mirror,
        ).createShader(bounds);
      },
      child: Icon(
        icon,
        color: Colors.white,
      ),
    );
  }
}


BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          icon: GradientIcon(
            icon: Icons.home,
            isSelected: true,
          ),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: GradientIcon(
            icon: Icons.favorite,
            isSelected: false,
          ),
          label: 'Favorite',
        ),
        BottomNavigationBarItem(
          icon: GradientIcon(
            icon: Icons.settings,
            isSelected: false,
          ),
          label: 'Setting',
        ),
        BottomNavigationBarItem(
          icon: GradientIcon(
            icon: Icons.abc,
            isSelected: false,
          ),
          label: 'idk',
        ),
      ],
    )

Upvotes: 0

Related Questions