flutter - Flutter：使用 CircleBorder 填充背景的 IconButton - 如何设置大小

Question

 Container(
                      child: Center(
                        child: Ink(
                          decoration: const ShapeDecoration(
                            color: Colors.lightGreen,
                            shape: CircleBorder(),
                          ),
                          child: IconButton(
                            icon: Icon(Icons.add),
                            color: Colors.white,
                            onPressed: () {},
                          ),
                        ),
                      ),
                    ),
                    Text('KG : $_volume'),
                    Container(
                      width: 40,
                      height: 40,
                      child: Center(
                        child: Ink(
                          decoration: const ShapeDecoration(
                            color: Colors.lightGreen,
                            shape: CircleBorder(),
                          ),
                          child: IconButton(
                            icon: Icon(Icons.add),
                            color: Colors.white,
                            onPressed: () {},
                          ),
                        ),
                      ),
                    ),

这将创建具有填充背景的 IconButton，如附加图像中所示。

我想在这里减小圆圈（CircleBorder）的大小。我如何有效地做到这一点？

标签： flutter

Answer 1

小IconButton部件具有默认填充尝试删除它会起作用

试试这个方法

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 40,
              height: 40,
              child: GestureDetector(
                onTap: (){

                },
                child: Ink(
                    decoration: const ShapeDecoration(
                      color: Colors.lightGreen,
                      shape: CircleBorder(),
                    ),
                    child: Icon(Icons.add,color: Colors.white,)
                ),
              ),
            ),
            Text('KG : 5'),
            Container(
              width: 40,
              height: 40,
              child: GestureDetector(
                onTap: (){

                },
                child: Ink(
                    decoration: const ShapeDecoration(
                      color: Colors.lightGreen,
                      shape: CircleBorder(),
                    ),
                    child: Icon(Icons.add,color: Colors.white,)
                ),
              ),
            ),
          ],
        ),

另一种方式

        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(shape: BoxShape.circle,
              color: Colors.lightGreen),
              child: GestureDetector(
                onTap: () {
                  debugPrint('Clicked');
                },
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
              ),
            ),
            Text('KG : 5'),
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(shape: BoxShape.circle,
                  color: Colors.lightGreen),
              child: GestureDetector(
                onTap: () {
                  debugPrint('Clicked');
                },
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),

输出