为图标颤动添加边框

Question

我想为 flutter 中的图标添加边框，如下图所示。

我怎样才能实现这一目标？

Answer 1

我尝试了一些有创意的东西

Stack(
  children: [
     _buildIcon(48, Colors.blue),
     _buildIcon(44, Colors.white),
  ],
),

Widget _buildIcon(double size, Color color) {
  return Container(
    height: 48,
    width: 48,
    alignment: Alignment.center,
    child: Icon(
      Icons.star,
      color: color,
      size: size,
    ),
  );
}

Answer 2

接受的答案适用于简单的填充图标，例如示例中的星星。如果您有更复杂的图标（例如带有细线），您很快就会遇到对齐问题。

我通过使用堆叠阴影解决了这个问题：

import 'package:flutter/material.dart';

/// A widget that outlines an icon
class OutlinedIcon extends StatelessWidget {
  const OutlinedIcon(
    this.iconData, {
    super.key,
    this.color,
    this.size,
  });

  /// The iconData to be displayed
  final IconData iconData;

  /// The color of the icon
  final Color? color;

  /// The size of the icon
  final double? size;

  @override
  Widget build(BuildContext context) {
    return Icon(
      iconData,
      size: size,
      color: color,
      shadows: List.generate(
        10,
        (index) => Shadow(
          blurRadius: 2,
          color: Theme.of(context).canvasColor,
        ),
      ),
    );
  }
}

这给了我以下效果：

------>

您可以通过改变模糊和堆栈中阴影的数量来更改阴影的强度。绝对不完美（你渲染的是 10 个阴影而不是一个轮廓小部件，并且边框有点模糊），但对于我的目的来说已经足够了......