Flutter：为图标按钮添加边框（2 种方法）

这篇快速文章向您展示了在 Flutter 中创建带边框的图标按钮的几种不同方法。

使用 IconButton 和容器

您需要做的就是简单地将ICONBUTTON小部件包装在圆形容器小部件中，然后使用 BoxDecoration在该容器中添加边框。

截屏：

代码：

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(width: 10, color: Colors.blue),
            color: Colors.amber.shade200,
            shape: BoxShape.circle,
          ),
          child: IconButton(
            iconSize: 150,
            icon: const Icon(
              Icons.play_arrow,
              color: Colors.pink,
            ),
            onPressed: () {
              print('Hi There');
            },
          ),
        ),
      ),
);

使用 Material、Ink 和 InkWell 小部件

您还可以使用Material小部件，Ink小部件和InkWell窗口小部件的组合来创建带边框的图标按钮。闪光/涟漪效果将保持不变。下面的示例使用此技术产生2个图标按钮。

截屏：

代码：

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // square icon button
            Material(
              type: MaterialType.transparency,
              child: Ink(
                decoration: BoxDecoration(
                  // set the border
                  border: Border.all(width: 10, color: Colors.blue),
                  // background color
                  color: Colors.amber.shade100,
                ),
                child: InkWell(
                  onTap: () {
                    print("Hi");
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(30.0),
                    child: Icon(
                      Icons.laptop_mac,
                      size: 100,
                      color: Colors.blue,
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 30),

            // circular icon button
            Material(
              type: MaterialType.transparency,
              child: Ink(
                decoration: BoxDecoration(
                  // set the border
                  border: Border.all(width: 10, color: Colors.deepOrange),
                  // border radius
                  borderRadius: BorderRadius.circular(100),
                  // background color
                  color: Colors.black,
                ),
                child: InkWell(
                  borderRadius: BorderRadius.circular(100.0),
                  onTap: () {
                    print("Hello");
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(30.0),
                    child: Icon(
                      Icons.rocket,
                      size: 100,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
);

火焰兔

海报 链接