透明边框关闭答案

【问题标题】：Dismissible with transparent border透明边框关闭
【发布时间】：2022-01-03 20:04:43
【问题描述】：

这是我当前的小部件：

我希望边框看起来是透明的，这样我就可以看到它后面的红色背景。我试过用Container 包装它，颜色为Colors.transparent，但它根本没有用。

我怎样才能做到这一点？这是我的代码，目前：

return Container(
  height: 80.0,
  decoration: const BoxDecoration(
    color: Colors.black38,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          const SizedBox(width: 11.0),
          Container(
            decoration: BoxDecoration(
            color: addiction.color,
              borderRadius: const BorderRadius.all(
                Radius.circular(15),
              ),
            ),
            height: 60.0,
            width: 6.0,
          ),
          const SizedBox(width: 11.0),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                addiction.name,
                style: GoogleFonts.lato(
                  fontSize: 21.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 4.0),
              buildDate(),
            ],
          ),
        ],
      ),
    ],
  ),
);

有什么想法吗？

【问题讨论】：

标签： flutter dart

【解决方案1】：

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);

【讨论】：

虽然我得到了漆黑的背景，但使用它，如果我尝试用Containers（添加自定义颜色）包装我的东西，那么问题仍然存在。我做错了吗？

【解决方案2】：

好的，我能够按照建议的here 使用Stack 来解决这个问题。

return Stack(
 children: [
 // background layer of the tile
 Container(
  height: 80,
  decoration: BoxDecoration(
    color: Colors.red[300],
    // needs to be a unit more or so than the tile's radius
    borderRadius: const BorderRadius.all(Radius.circular(16)),
  ),
  alignment: Alignment.centerRight,
  padding: const EdgeInsets.only(right: 10),
  child: const Icon(
    Icons.delete_forever,
    color: Colors.white,
    size: 25.0,
  ),
),
// foreground layer of the tile
Dismissible(
  key: Key(addiction.id),
  direction: DismissDirection.endToStart,
  onDismissed: (direction) {
    manager.deleteAddiction(index);

    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('${addiction.name} deleted.'),
    ));
  },
  child: InkWell(
    borderRadius: const BorderRadius.all(Radius.circular(15)),
    onTap: () {print("helo");},
    child: AddictionTile(
      key: Key(addiction.id),
      addiction: addiction,
    ),
   ),
  ),
 ],
);

【讨论】：