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アプリ開発の⼀歩を踏み出そう!

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

iOS13で申請するために押さえておきたいポイント

1 はじめに2 presentViewController3 DeviceToken4 Launch Storyboard5 Dark Mode6 Sign In with Apple7 さいごに8 ...

ReactNative開発のスタート、シミュレータでのデバッグ

1 はじめに2 改めてシミュレータの起動3 表示内容を変更してみる3.1 App.js3.2 表示テキストの変更3.3 シミュレータの更新「command + R」4 デバッグメニュー4.1 Real ...

【Unity】AssetStoreで取得したCharactorにThirdPersonCharacterの動きを設定する。

1 はじめに2 AssetStoreからインポート2.1 RPG Hero PBR HP Polyart2.2 StandardAssets3 ThirdParsonCharactorの動きについて3 ...

【Swift】Xcode13XCTestの新機能、繰り返し実行で遊んでみた。

1 はじめに2 XCTestについて3 繰り返しのテストについて4 実際に使ってみる5 テストコードについて6 テストの設定7 さいごに8 おすすめ書籍 はじめに こんにちは、suzukiです。とうと ...

【Unity】Raycastを利用して接地判定を行う

1 はじめに2 今回やりたいこと3 色々な接地判定4 Rayとは5 接地判定6 ジャンプのコードを記述7 さいごに8 おすすめ書籍 はじめに こんにちはsuzukiです。久しぶりにunityを触り色々 ...

フォロー

blog-page_side_responsive

2022年2月
 12345
6789101112
13141516171819
20212223242526
2728  

アプリ情報

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