flutter 抖动：墨水池涟漪效果隐藏在一个充满颜色的容器子

4ioopgfo 于 2023-03-31 发布在 Flutter

关注(0)|答案(2)|浏览(139)

我正在使用图标+文本按钮的组合材料3作为我的主题。我已经做了我的功课和研究，尽我所能做的，作为最后一次绝望的尝试，我发布这个问题。我是初学者与Flutter。

这就是点击后发生的事情：

下面是widget的相关代码：

class TransactionButton extends StatelessWidget {
  const TransactionButton({Key? key, required this.icon, required this.text, required this.onTap})
      : super(key: key);

  final void Function() onTap;
  final IconData icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.primaryContainer,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Icon(icon, color: Theme.of(context).colorScheme.onPrimaryContainer,),
            const SizedBox(width: 8,),
            Text(
              text,
              style: Theme.of(context).textTheme.titleMedium?.copyWith(
                  color: Theme.of(context).colorScheme.onPrimaryContainer),
            )
          ],
        ),
      ),
    );
  }
}

请记住，材料3是启用。如果你仔细检查所附的gif你会发现，在角落里，我可以看到涟漪效应。

flutter

来源：https://stackoverflow.com/questions/75887208/flutter-inkwell-ripple-effect-hid-behind-a-color-filled-container-child

2条答案

按热度按时间

4dbbbstv1#

您可以尝试将此添加到InkWell

splashFactory: NoSplash.splashFactory,

赞(0）回复(0）举报 2023-03-31

tp5buhyn2#

这是因为Container Widget的color属性与InkWell Widget的飞溅色重叠。您可以通过删除Container Widget的color并将Material Widget Package 在InkWell Widget顶部来解决此问题。
类似的问题在这里被问到：- InkWell not showing ripple effect
样本代码：-

Material( // <-- Wrap with Material Widget
    color: Theme.of(context).colorScheme.primaryContainer,
    child: InkWell(
        onTap: () {},
        child: Container()
    )
)

验证码：

import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  bool showGradient = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
              child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Material( // <-- Wrap with Material Widget
          color: Theme.of(context).colorScheme.primaryContainer,
          child: InkWell(
            onTap: () {},
            child: Container(
              width: 100,
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  Icon(
                    Icons.double_arrow_outlined,
                    color: Theme.of(context).colorScheme.onPrimaryContainer,
                  ),
                  const SizedBox(
                    width: 8,
                  ),
                  Text(
                    'Send',
                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
                        color:
                            Theme.of(context).colorScheme.onPrimaryContainer),
                  )
                ],
              ),
            ),
          ),
        ),
      ))),
    );
  }
}

输出：-

赞(0）回复(0）举报 2023-03-31

我来回答

flutter 抖动：墨水池涟漪效果隐藏在一个充满颜色的容器子

2条答案

相关问题

热门标签

最新问答