Question

我想在项目上添加波纹，直到我使用BoxDecoration在项目上添加渐变为止，效果都很好。

Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        shadowColor: Colors.grey[50],
        child: InkWell(
          onTap: () {},
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: AlignmentDirectional.bottomStart,
                end: AlignmentDirectional.topEnd,
                colors: [
                  Colors.yellow[800],
                  Colors.yellow[700],
                ],
              ),
            ),
            padding: EdgeInsets.all(16.0),
            child: Text(
              widget.title,
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }

Answer 1

2019年更新：

您应该在Ink内使用Material小部件，而不是Container。它还需要使用decoration参数：

Material(
      child: Ink(
        decoration: BoxDecoration(
          // ...
        ),
        child: InkWell(
          onTap: () {},
          child: child, // other widget
        ),
      ),
);

Answer 2

我找到了解决方法：

我需要一个Material用于Inkwell，一个Material用于标高和圆角边界。内部Material的类型为MaterialType.transparency，因此它不会在其父级的框装饰上绘制任何内容，并且仍保留墨水效果。阴影和边框由外部Material控制。

Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(  // <----------------------------- Outer Material
        shadowColor: Colors.grey[50],
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: AlignmentDirectional.bottomStart,
              end: AlignmentDirectional.topEnd,
              colors: [
                AppColors.pinkDark,
                AppColors.pink,
              ],
            ),
          ),
          child: Material(  // <------------------------- Inner Material
            type: MaterialType.transparency,
            elevation: 6.0,
            color: Colors.transparent,
            shadowColor: Colors.grey[50],
            child: InkWell(  //<------------------------- InkWell
              splashColor: Colors.white30,
              onTap: () {},
              child: Container(
                padding: EdgeInsets.all(16.0),
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.work,
                      size: 40.0,
                      color: Colors.white,
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Column(
                      children: <Widget>[
                        Text(
                          widget.title,
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

Answer 3

飞溅颜色与容器BoxDecoration重叠

尝试一下

  Widget build(BuildContext context) {
   return new Container(
      decoration: BoxDecoration(
      borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
      gradient: LinearGradient(
        begin: AlignmentDirectional.bottomStart,
        end: AlignmentDirectional.topEnd,
        tileMode: TileMode.repeated,
        colors: [
          Colors.yellow[800],
          Colors.yellow[700],
        ],
      ),
      boxShadow: <BoxShadow>[
        new BoxShadow(
            color: Colors.grey[50],
            //blurRadius: 0.3,
            blurRadius: 6.0,
            offset: new Offset(0.0, 4.0)
        )
      ]
  ),
  margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
  child: Material(
    color: Colors.transparent,
    //shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    //elevation: 6.0,
    //shadowColor: Colors.grey[50],
    child: InkWell(
      splashColor: const Color(0x8034b0fc),
      onTap: () {},
      child: Container(
        //decoration: ,
        padding: EdgeInsets.all(16.0),
        child: Text(
          'Click',
          style: TextStyle(
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
 );
}

Answer 4

如果有人来这里想使用带有圆形装饰的墨水瓶（像我一样），我会使用公认的答案来解决这个问题。

Material(
  child: Ink(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.grey[350],
        border: Border.all(
          color: Colors.red,
          width: 4.0,
        ),
      ),
      child: InkWell(
        customBorder: const CircleBorder(),
        onTap: onTap,
        child: const Icon(Icons.add, size: 48, color: Colors.white),
      ),
    ));

Answer 5

我创建的简单的飞溅效果小部件非常完美。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SplashEffect extends StatelessWidget {
  final Widget child;
  final Function onTap;

  const SplashEffect({Key key, this.child, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: InkWell(
        borderRadius: BorderRadius.all(Radius.circular(16)),
        child: child,
        onTap: onTap,
      ),
    );
  }
}

与容器装饰一起使用时，墨槽未显示出波纹

5 个答案: