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?
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()),
)
],
),
);
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.