Flutter Web Icon doesn't fit inside Container

Issue

I have tried removing all padding and border and put the icon inside a FittedBox but the are still parts of the Container that are visible. How can I remove them? Thank you in advance.

void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Cupertino App',
      debugShowCheckedModeBanner: false,
      home: CupertinoPageScaffold(
        child: Center(
          child: CupertinoButton(
            minSize: 15,
            padding: EdgeInsets.zero,
            onPressed: () {},
            child: Container(
              width: 40,
              padding: EdgeInsets.zero,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
                border: Border.all(
                  width: 0,
                  color: Colors.transparent,
                ),
              ),
              child: const FittedBox(
                fit: BoxFit.cover,
                child: Icon(
                  CupertinoIcons.minus_circle_fill,
                  color: Colors.amber,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Solution

The container colors are visible because the Icon assets comes with default padding, You can check this question: How to get rid of a icon padding,

You can use transparent Color on the Container to hide it.

decoration: BoxDecoration(
  shape: BoxShape.circle,
  color: Colors.transparent, // here
  border: Border.all(

Answered By – Yeasin Sheikh

Answer Checked By – Mary Flores (FlutterFixes Volunteer)