【Flutter】背景画像をぼかす(ブラー)エフェクトを実装

2023年8月28日2023年8月29日

Flutterで背景画像をぼかす(ブラー)エフェクトを実装する方法を紹介します。

今回はImageFilteredを使用して画像をぼかしていきます。

背景画像をぼかす方法

まずはImageFilteredを使用するためにdart:uiをインポートします。

import 'dart:ui';

次にImageFilteredの子ウィジェットで背景画像をぼかしたいウィジェットを指定します。

imageFilterにImageFilter.blur()を渡し、ImageFilter.blur()のsigmaXとsigmaYにdouble値を渡してぼかしを調整します。

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
  child: Image.network(
    'https://images.unsplash.com/photo-1627376617965-b8c29ca91aca',
  ),
)

sigmaXとsigmaYの値が0の場合はぼかしのないデフォルトの画像となり、値が高ければ高いほど画像がぼけて表示されます。

サンプルコード

import 'dart:ui';

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: BackdropFilterExample(),
      ),
    );
  }
}

class BackdropFilterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(30),
        child: ImageFiltered(
          imageFilter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
          child: Image.network(
              'https://images.unsplash.com/photo-1627376617965-b8c29ca91aca'),
        ),
      ),
    );
  }
}

合わせて読みたい

参考サイト

https://www.youtube.com/watch?v=rBJBr4nuuuE