【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part78 Painting and effects
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part78 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part77 Painting and effects
引き続き、Painting and effectsについて学びます。
Painting and effects
BackdropFilter, ImageFilterウィジェット
ClipRectで一部だけフィルター
ClipRect
ウィジェットを使って一部分だけフィルターをかけることもできます。
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'),
),
Center(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5,
sigmaY: 5,
),
child: Container(
alignment: Alignment.center,
width: 100,
height: 100,
color: Colors.black.withOpacity(0.5)),
)))
])));
}
}
最後に
Flutter特有の「childのchildの・・・」ネスト、もう少しシンプルに実装できたほうが嬉しいですね。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません