flutter container remove outline border shadow

Question

I want to remove this colored line of pixel rounded in IconButton I think this line of pixel didn't relate of shadow

My code is:

Container(
    boxShadow: [
      BoxShadow(
        color: Colors.transparent,
      ),
    ],
    color: Colors.black,
    shape: BoxShape.circle,
    border: Border.all(
      color: Colors.white,
      width: 5,
    ),
  ),
  child: IconButton(
    color: Colors.white,
    icon: Icon(
       Icons.search,
    ),
  ),
),

Answer 1

I'm not sure if it's a bug in Flutter or not. You can try adding another colored Container as its child.

Sample:

class CircleIconButton extends StatelessWidget {
  const CircleIconButton({
    required this.onPressed,
    this.border,
    this.color = Colors.black,
    this.icon = Icons.search,
    this.iconColor = Colors.white,
    Key? key,
  }) : super(key: key);

  final VoidCallback onPressed;
  final BoxBorder? border;
  final Color color;
  final IconData icon;
  final Color iconColor;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: border,
      ),
      child: Container(
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
        ),
        child: IconButton(
          onPressed: onPressed,
          color: Colors.white,
          icon: Icon(icon),
        ),
      ),
    );
  }
}

Usage:

CircleIconButton(
  onPressed: () {},
  border: Border.all(
    color: Colors.yellow,
    width: 5,
  ),
),

Answer 2

I found a solution for myself in using strokeAlign:StrokeAlign.center or strokeAlign:StrokeAlign.outline, Maybe it will be useful to someone.

OutlinedButton(
    style: OutlinedButton.styleFrom(
        shape: CircleBorder(),
        fixedSize: const Size(60, 60),
        elevation: 0.0,
        foregroundColor: Color.fromARGB(255, 255, 255, 255),
        backgroundColor: Color.fromARGB(255, 17, 17, 17),
        side: const BorderSide(
            color: Color.fromARGB(255, 255, 255, 255),
            strokeAlign: StrokeAlign.center,
            width: 4),            
        ),
    onPressed: () {},
    child: Container(
      height: 60,
      width: 60,
      child: Icon(
        Icons.create,
      ),          
    ),
  ),