小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

今天我会与大家分享flutter开发中GridTile中图像上方的InkVell波纹以及flutter analyse的使用

Flutter中GridTile中图像上方的InkVell波纹

我认为这是在图像上显示波纹效果的更好方法。

Ink.image(
    image: AssetImage('sample.jpg'),
    fit: BoxFit.cover,
    child: InkWell(
        onTap: () {},
    ),
),

使用Stack，我们可以将Material和InkWell带到图像上。要拉伸材质，我们将使用Positioned.fill小部件。

Stack(
  children: <Widget>[
    Image( ... ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () { ... },
        ),
      ),
    ),
  ],
);

我们创建了这个简单的小部件，以在任何给定孩子的上方绘制墨水反应。

class InkWrapper extends StatelessWidget {
  final Color splashColor;
  final Widget child;
  final VoidCallback onTap;
​
  InkWrapper({
    this.splashColor,
    @required this.child,
    @required this.onTap,
  });
​
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: splashColor,
              onTap: onTap,
            ),
          ),
        ),
      ],
    );
  }
}

• 优秀的方法。即使在AspectRatio下也可以使用。如果可以使用FadeInImage会更好。

SizedBox(
  height: 200,
  child: Ink(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("chocolate_image"),
        fit: BoxFit.cover,
      ),
    ),
    child: InkWell(
      onTap: () {},
      splashColor: Colors.brown.withOpacity(0.5),
    ),
  ),
)

Material(  
  child : InkWell(          
      child : YourWidget    
  )      
)

flutter analyse

配置步骤

• 在项目更目录添加analysis_options.yaml文件可以配置lint规则和analyzer行为

• 具体支持的lint规则参考dart-lang.github.io/linter/lint…

• 目前有3类已经定义的常用规则

  Many lints are included in various predefined rulesets:

  • pedantic for rules enforced internally at Google
  • effective_dart for rules corresponding to the Effective Dart style guide
  • flutter for rules used in flutter analyze

• 推荐使用google团队内部的规则库pedantic

  • 在yaml里面添加依赖 pedantic: ^1.8.0+1

• 在analysis_options.yaml里面引入使用

  include: package:pedantic/analysis_options.1.8.0.yaml

使用

配置好analysis_options.yaml文件的规则后,执行flutter analyse命令将对你整个项目或者package的代码进行静态分析

修复

• 根据提示修复

点击提示的规则，就会跳转到需要修复位置，按照lint规则的说明和例子就可以修正了。

• 利用VSCode快速修复

在提示有问题的代码的地方Ctrl +., 就会自动弹出快速修复，比如图中为增加const标识。 是不是快多了。

参考配置

当然你还可以根据你的需要定制自己的静态分析规则，下面是最近使用的一套配置，仅供你参考：

analysis_options.yaml参考配置