Search code examples
flutterflutter-layoutflutter-animation

Container loses box shadow during animation


I have this Container wrapped in an AnimatedSize widget, however when the container is animating to the new size it loses its BoxShadow :

enter image description here

is there anyway to fix this behavior so that the BoxShadow animates with the Container?

class SCExpansionPanel extends StatefulWidget {
  final Widget body;
  const SCExpansionPanel(
    {Key? key,
    required this.body}) : super(key: key);

  @override
  State<SCExpansionPanel> createState() => _SCExpansionPanelState();
}

class _SCExpansionPanelState extends State<SCExpansionPanel> {
  
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedSize(
      
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeIn,
      alignment: Alignment.topCenter,
      child: 
      Container(
      clipBehavior: Clip.antiAlias,
      width: 0.9.sw,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
         cardShadow
        ],
       color: Colors.white
    
      ),
      child: Column(children: [
        InkWell(
          onTap: () {
            setState(() {
              isExpanded = !isExpanded;
            });
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 4,
              vertical:8
            ),
            child: Row(children:const [
                 Icon(Remix.arrow_right_s_line, size: 40, color: Color(0xff6D6D70),),
                 Text("Detalhes",
                style:
                TextStyle(
                  color: Color(0xff6B3300),
                  fontFamily: "JosefinSans",
                  fontWeight: FontWeight.w600,
                  fontSize: 26

                ),)
            ],),
          ),
        ),
        isExpanded ? widget.body : Container()
      ],)
    )
    );
  }
}


Solution

  • move your BoxDecoration to a container wrapped above the AnimatedSize

    Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              boxShadow: [cardShasow],
              color: Colors.white),
          child: AnimatedSize(
                    ...