Flutter 画像にBlurをかける方法

パッケージを用意する

https://pub.dev/packages/blur

今回は、「blur」というパッケージを使用します。
下記いずれかの方法でインストールし、インポートしてください。

ターミナルからコマンドを実行

flutter pub add blur

pubspec.yamlに追加　(最新バージョンをお確かめください)

dependencies:
  blur: ^3.1.0

pubspec.yamlに記述した場合は、flutter pub getを実行することをお忘れなく。

ノーマルな状態で画像を表示

今回はサンプルとしてイラストやの「もぐらのイラスト「道路工事」」を使用しています。
URLが長いので、コード中では割愛しています。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('テスト'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          child: Image.network(
              '<image url>'),
        ),
      ),
    );
  }
}

blurをかける

blurをかけたい部分をBlurクラスでラップしていきます。

      body: Center(
        child: Blur( // BlurでWrap
          child: Container(
            height: 200,
            width: 200,
            child: Image.network(
                '<image url>'),
          ),
        ),
      ),

文字を重ねる

画像の上にblurをかけて、その上に文字を表示したい場合は、.blurredメソッドを表示する画像に適用します。

      body: Center(
          child: Container(
              height: 200,
              width: 200,
              child: Image.network('<image url>').blurred(
                colorOpacity: 0.2,
                borderRadius:
                    BorderRadius.horizontal(
                      right: Radius.circular(20)),
                overlay: Text(
                  'Cat',
                  style: TextStyle(
                      fontSize: 40,
                      color: Colors.red,
                      fontWeight: FontWeight.bold),
                ),
              )))