Flutter Web 图标不适合容器内部

Question

我已经尝试删除所有填充和边框并将图标放在 FittedBox 中，但仍然是容器的可见部分。我怎样才能删除它们？提前谢谢你。

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,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

你可以大小

Icon(
CupertinoIcons.minus_circle_fill,
color: Colors.amber,
size:40
 )

并且您不需要容器边框默认值为 none

decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
                //border: Border.all(
                  //width: 0,
                  //color: Colors.transparent,
                // ),
              ),

或此处

CupertinoButton(
            minSize: 15,
            padding: EdgeInsets.zero,
            onPressed: () {},
            child: Container(
              width: 40,
              padding: EdgeInsets.zero,
              decoration:const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.amber,
                
              ),
              child: const FittedBox(
                fit: BoxFit.cover,
                child: Icon(
                  Icons.remove,
                  color: Colors.blue,
                  size:40
                ),
              ),
            ),
          ),

Answer 2

容器颜色是可见的，因为 Icon 资产带有默认填充，你可以检查这个问题：,

您可以在容器上使用 transparent 颜色来隐藏它。

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

Flutter Web 图标不适合容器内部

Flutter Web Icon doesn't fit inside Container

flutter

flutter-web