【 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)),
)
])));
}
}
最後に
画像を背景にして前面に何かメインのウィジェットを表示することで立体的な表示ができそうですね。
もう少し簡単に実装できないものでしょうかね。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません