如何为 BottomNavigationBarItem 添加阴影

Question

I have used the BottomNavigationBar widget from material.dart . I want to have a background shadow on the selected BottomNavigationBarItem . The desired output is Something like this. I have written the following code whose output is like this :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shoppingapp/views/screens/cart/cart.dart';
import 'package:shoppingapp/views/screens/profile/profile.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);

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

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 0;
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  List<BottomNavigationBarItem> items = [
    BottomNavigationBarItem(
        icon: Icon(Icons.home_outlined),
        label: "Home",
        backgroundColor: Colors.black),
    BottomNavigationBarItem(
        icon: Icon(Icons.shopping_bag_outlined),
        label: "Cart",
        backgroundColor: Colors.black),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.heart),
        label: "Wishlist",
        backgroundColor: Colors.black),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled),
        label: "Profile",
        backgroundColor: Colors.black)
  ];
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Home',
      style: optionStyle,
    ),
    Cart(),
    Text(
      'Wishlist',
      style: optionStyle,
    ),
    Profile(),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(30), topLeft: Radius.circular(30)),
        boxShadow: [
          BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(25.0),
          topRight: Radius.circular(25.0),
        ),
        child: BottomNavigationBar(
          items: items,
          type: BottomNavigationBarType.shifting,
          currentIndex: _selectedIndex,
          showSelectedLabels: true,
          showUnselectedLabels: false,
          selectedItemColor: Colors.white,
          iconSize: 30,
          onTap: _onItemTapped,
          backgroundColor: Colors.white,
        ),
      ),
    );
  }
}

Answer 1

You can try using this package Flutter Glow

Flutter Glow example :

GestureDetector(
  onTap: () {
    setState(() {
      iconSelected = !iconSelected;
    });
  },
  child: GlowIcon(
    iconSelected ? Icons.wb_cloudy : Icons.cloud_queue,
    color: flutterColor,
    glowColor: iconSelected ? flutterColor : Colors.transparent,
    size: 64,
    blurRadius: 9,
  ),
 );
),