AnimatedSize clipping the widget

Question

I'm creating a bottom navigation bar. When the app launches, the default selected navigation tab extends as seen in the gif.

The issue is when AnimatedSize starts the animate, borders cuts off. Therefore, the container's border-radius doesn't look good. I don't think I'm clipping the view. What am I missing?

slide_box.dart

AnimatedSize(
  curve: Curves.ease,
  child: new Container(
    padding: EdgeInsets.symmetric(vertical: _topPadding),
    alignment: Alignment.center,
    child: Container(
      width: _width,
      height: _height,
      decoration: BoxDecoration(
          color: _service.settings.color,
          border: Border.all(color: Colors.red, width: 5),
          borderRadius: BorderRadius.all(Radius.circular(5)),
          boxShadow: [BoxShadow(offset: Offset(0, 3), blurRadius: 6, color: const Color(0xff000000).withOpacity(0.16))]),
    ),
  ),
  vsync: this,
  duration: _service.animationDuration,
),

main.dart

return Container(
  height: kBottomNavigationBarHeight,
  child: Stack(
    children: [
      if (service.isBottomSlideVisible) SlideBox(),
      Container(
        alignment: Alignment.center,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: service.items
                .map((e) => NavItem(
                      e,
                      onTab: () {
                        var index = service.items.indexOf(e);
                        service.setSelected(index);
                        _updateIndex(index);
                      },
                    ))
                .toList()),
      )
    ],
  ),
);

user_9902765 · Answer

1. Wrap the AnimatedSize with a Container and add borders to the Container.

2. Set height of the Container to _height.

3. Add a top margin of _topPadding to the Container.

4. Subtract the border width of the Container from the left parameter of the AnimatedPositioned to center the content.

5. Remove the borders from the inner Container.

AnimatedPositioned(
            left: _posX - _sizeFactor - 5,
            child: Container(
              height: _height,
              margin: EdgeInsets.only(top: _topPadding),
              decoration: BoxDecoration(
                  color: _service.settings.color,
                  border: Border.all(color: Colors.red, width: 5),
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                  boxShadow: _service.settings.shadow ??
                      [
                        BoxShadow(
                            offset: Offset(0, 3),
                            blurRadius: 6,
                            color: const Color(0xff000000).withOpacity(0.16))
                      ]),
              child: AnimatedSize(
                curve: Curves.ease,
                child: new Container(
                  padding: EdgeInsets.symmetric(vertical: _topPadding),
                  alignment: Alignment.center,
                  child: Container(
                    width: _width,
                    height: _height,
                  ),
                ),
                vsync: this,
                duration: _service.animationDuration,
              ),
            ),
            duration: _service.animationDuration,
            curve: Curves.easeOutCirc,
          ),

Result:

AnimatedSize clipping the widget

1 Answers