I have a problem with the an AnimatedContainer. I cant make is circular. I only get an oval shape. Is there a way to make it a circular? I increased the borderRadius but nothing changes. Any suggestions?
AnimatedContainer(
duration: Duration(milliseconds: 300),
decoration: BoxDecoration(
color: currentIndex == items!.indexOf(item)
? selectedBackgroundColor
: Colors.transparent,
borderRadius: BorderRadius.circular(25)),
child: InkWell(
onTap: () {
onTap!(items.indexOf(item));
},
borderRadius: BorderRadius.circular(25.0),
child: Container(
width: width.isFinite
? (width / items.length - 8)
: MediaQuery.of(context).size.width / items.length - 24,
padding: EdgeInsets.symmetric(
horizontal: 4, vertical: item.title != null ? 4 : 8),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
item.customWidget == null
? Icon(
item.icon,
color: currentIndex == items.indexOf(item)
? selectedItemColor
: unselectedItemColor,
size: iconSize,
)
: item.customWidget!,
if (item.title != null)
Text(
'${item.title}',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: currentIndex == items.indexOf(item)
? selectedItemColor
: unselectedItemColor,
fontSize: fontSize,
),
),
],
),
),
),
),
CodePudding user response:
You can wrap the Animated Container with CircleAvatar and give a big enough radius and make CircleAvatar's background color same as Container.
CodePudding user response:
You can use decoration
on container.
AnimatedContainer(
decoration: ShapeDecoration(shape: CircleBorder()),
),
Or
AnimatedContainer(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
More about BoxDecoration