flutterdartflutter-layoutanimatedcontainer

Flutter AnimatedContainer oval decoration instead of circle

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? enter image description here

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,
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
Solution

  • You can use decoration on container.

    AnimatedContainer(
  decoration: ShapeDecoration(shape: CircleBorder()),
),

    Or

    AnimatedContainer(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),

    More about BoxDecoration