Flutter - 在 IconButton 中显示渐变效果

Question

我正在尝试在渐变上使用IconButton创建后退按钮，但波纹效果显示在渐变下方，这不是所需的行为。 我见过类似的问题，可以使用Material小部件解决，但它只能接受一种颜色而不是渐变。

此图像显示了波纹效果的外观，但它没有渐变。

此图像显示了文本上的渐变，但也显示了波纹效果。

正确的顺序应该是IconButton > Ripple > Gradient > Text

有没有办法做到这一点？

这是重现该问题的最小代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text("Lorem ipsum", style: TextStyle(fontSize: 28)),
                ],
              ),
              Container(
                width: double.infinity,
                height: 72,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    tileMode: TileMode.mirror,
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Theme.of(context).canvasColor,
                      Theme.of(context).canvasColor.withOpacity(0),
                    ],
                  ),
                ),
                padding: const EdgeInsets.all(12),
                child: Align(
                  alignment: Alignment.topLeft,
                  child: IconButton(
                    onPressed: () => print("pop"),
                    icon: const Icon(Icons.arrow_back),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

提前致谢。

Answer 1

您可以尝试使用InkWell创建自己的图标按钮

child: Align(
  alignment: Alignment.topLeft,
  child: Material(
    color: Colors.transparent,
    child: InkWell(
      borderRadius: BorderRadius.circular(50),
      onTap: () {
        print("pop");
      },
      splashColor: Colors.green,
      child: Padding(
        padding: EdgeInsets.all(12),
        child: Icon(
          Icons.arrow_back,
        ),
      ),
    ),
  ),
),