容器内的墨水/图标按钮颜色

Question

我在容器内的墨水（给它一个边框）内有一个图标按钮。但是，边框不可见，因为它被容器颜色覆盖。

在容器内显示带有彩色背景的 IconButton 的最佳方式是什么？

工作示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Container(
    color: Colors.pink,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  );
}

}

Answer 1

使用Material代替Container （参见官方示例）

Container不起作用的原因是因为 Ink 是在底层Material小部件上绘制的，如Ink 文档中所述：

由 InkWell 和 InkResponse 渲染的墨水泼溅和高光在实际的底层材质上绘制，在材质上绘制的任何小部件（例如文本和图标）下绘制。如果在材质上绘制不透明图像（可能使用容器或装饰框），这些墨水效果将不可见，因为它们将被材质上方绘制的不透明图形完全遮挡。

查看工作演示：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Material(
    color: Colors.red,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  );
}

}

额外的：

如果您确实需要一个容器或其他非 Material 的小部件，则只需在 Ink Widget 和父级小部件之间添加一个 Material 小部件。（透明背景）

像这样：

Container(
    color: Colors.red,
    child: Material(
    color: Colors.transparent,
    child: Center(
      child: Ink(
        decoration: const ShapeDecoration(
          color: Colors.black,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {},
        ),
      ),
    ),
  ))