Tech

【Flutter】背景ぼかしなど簡単な画像操作をImageFilteredで行う

投稿日:

はじめに

背景のぼかしや、画像のローテートなど、簡単に行いたい時に便利な方法を紹介したいと思います。

準備

今回は外部パッケージは使わず、標準のdart:uiに含まれるImageFilteredを使用するだけなので、使用したいソースに以下のimportを行えば準備完了です。

 

実装

ぼかし(ブラー)

使用するには効果をかけたいウィジェットをImageFilteredで囲んで、imageFilterに効果を与えるだけでOKです。ウィジェットにぼかしをかけたい場合は以下のようにします。

blurの場合は縦軸と横軸に大きな数値を設定するほど、ぼかしが荒くなります、例えば標準の場合、

サンプルと同じく縦横5で指定した場合、

横のみ5で指定した場合、

縦のみ5で指定した場合、

この様に、ぼかし方にも差が出てきます。

マトリックス

imageFilterにはマトリックスを渡すこともできます、Matrix4を使用することで移動や、回転などを行うこともできます。

BackdropFilterとの違い

ImageFilteredと同じ様なことができるBackdropFilterというものがあります。扱えるパラメータもほぼ同じでブラーの場合以下の様になります。

では、両者の違いはどこになるのかというと、ImageFilteredはそのchildのみに効果を発揮しますが、BackdropFilterはその下のchild全てに効果を発揮します。ですので効果を効果を何処にどのようにかけたいかで選択していく事になります。

さいごに

親のウィジェットのみに効果をかけたい場合や、簡単にローテートやブラーがかけれるので、気軽に使えそうです。

おすすめ書籍

現場で使える Flutter開発入門 (Compass Booksシリーズ) はじめてのFlutter入門: iOS/Androidアプリ開発の⼀歩を踏み出そう!

page_footer_responsive




-Tech
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Go言語

GoでSMF(MIDI)ファイルを読み込んでみた

1 はじめに2 MIDIとは?2.1 SMFファイルについて2.1.1 Tickと分解能2.1.2 トラックチャンク3 gomidiを使ってSMFファイルを読み込む3.1 gomidiの導入3.2 実 ...

ReactNativeでアニメーションの実装

1 はじめに2 準備3 実装3.1 イベントを通しての実行3.2 アニメーションについて4 lottie-react-native4.1 Lottieとは5 準備6 実装7 さいごに8 おすすめ書籍 ...

React+axiosでhttpリクエスト

1 はじめに2 axiosとは2.1 XMLHttpRequest2.2 Promise3 準備4 実装4.1 resultsの中身4.2 エラーハンドリング4.3 カスタムヘッダーの付与5 Reac ...

祝!iOS15でハーフモーダルが追加

1 はじめに2 早速使ってみる2.1 準備2.2 実装2.3 detents2.4 コードでの高さ切り替え2.5 モーダル内のスクロール許可2.6 グラバーの表示2.7 角丸2.8 親Viewとの併用 ...

【Unity】AnimationControllerの基本的な使い方

1 はじめに2 事前準備2.1 キャラクター2.2 アニメーション3 Sceneに追加と設定4 AnimationController5 使い方5.1 State5.2 Transition5.3 P ...

フォロー

blog-page_side_responsive

2022年2月
 12345
6789101112
13141516171819
20212223242526
2728  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。