Zenn
🔨

[Flutter]画像にRippleエフェクトをつける方法(Stack以外)

2020/09/29に公開
Flutter
Dart
tech

この記事は

Flutterで画像にRippleをつけたくてやり方を調べてみたら、Stackで画像の上にMaterialを乗っける方法がヒットしました。(これとかそれとか)
ただ、これよりもシンプルな方法が見つかったのでそれを共有します。

方法

InkWidgetとInkWellWidgetを使うとかなりシンプルです

そのままの画像にRippleをつける

Ink.imageで簡潔に書けます。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Ink.image(
          width: 100,
          height: 100,
          image: NetworkImage('https://4.bp.blogspot.com/-SNILKxCoGxA/WMdTfmXnenI/AAAAAAABChM/HeJqR7MV9ZE2vXQFmdVeaZ3t6NxV6R9QwCLcB/s800/pet_nekotsugura.png'), 
          child: InkWell(
            onTap: () {
	    // 何かしらのTapイベント
	    },
          ),
        ),
      ),
    );
  }
}

角丸など加工した画像にRippleをつける

decorationを使うならばInkを使いましょう。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  final borderRadius = BorderRadius.circular(15);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Ink(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: borderRadius,
            image: DecorationImage(
              image: NetworkImage(
                  'https://4.bp.blogspot.com/-SNILKxCoGxA/WMdTfmXnenI/AAAAAAABChM/HeJqR7MV9ZE2vXQFmdVeaZ3t6NxV6R9QwCLcB/s800/pet_nekotsugura.png'),
              fit: BoxFit.cover,
            ),
          ),
          child: InkWell(
            borderRadius: borderRadius,
            onTap: () {
	    // 何かしらのTapイベント
	    },
          ),
        ),
      ),
    );
  }
}

参考

Codepenに今回のコードを起きましたので、試してみてください。

角丸なし
角丸あり

Discussion