【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part77 Painting and effects

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part77 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part76 Painting and effects

引き続き、Painting and effectsについて学びます。

Painting and effects

BackdropFilter, ImageFilterウィジェット

BackdropFilterウィジェットは自身のウィジェットのZ軸の下(奥側でしょうか?)にあるウィジェットに対しImageFilterを使用してぼかし効果を与えます。
バックドロップと聞くとプロレスが連想されますね。強そう😑

ImageFilterを使用するにはimport 'dart:ui`;が必要なようです。

import 'dart:ui';

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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('テスト中です。'),
            ),
            body: Stack(children: <Widget>[
              Center(
                child: Image.asset('images/cat_nekoko.png'),
              ),
              BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 5,
                  sigmaY: 5,
                ),
                child: Container(color: Colors.black.withOpacity(0.5)),
              )
            ])));
  }
}

最後に

画像を背景にして前面に何かメインのウィジェットを表示することで立体的な表示ができそうですね。

もう少し簡単に実装できないものでしょうかね。

今日はここまで!