【Flutter】Widget of the Week #5 Opacity

【Flutter】Widget of the Week #5 Opacity

Googleさん公式Youtube「Widget of the Week」で紹介されている、
ウィジェットのサンプル集第5弾は Opacity です!

Opacity ってなに?

直訳すると「不透明度」であり、
コンテナの透過してくれるウィジェット
です\_(・ω・`)ココ重要!

公式からの説明は以下の通り。

レイアウトを保ったまま非表示にしたいウィジェットがあるなら、Opacity を使ってみましょう。透過度の値を与えれば、一致する子が薄くなって表示されます。また、Opacity を使って Stack の子同士を一体化することもできますし、AnimatedOpacity で表示変化をアニメートすることもできます。 

公式Youtubeより引用

Widget of the Week #5 Opacity

まずは1分程度の公式の動画「Widget of the Week」を見て概要を把握しましょう!

 

概要をなんとなく把握できたところで、
Widgetの有無の差を見ていきましょう(∩’-‘⊂)シュッ

Opacity Widgetなしの場合

Opacity Widgetありの場合

真ん中の赤いContainerを完全に透明にし、
一番下の黄色いContainerを少し透過してみました。

Sample Code 1

Container Widgetありの完成形サンプルコードです!

構造は真ん中の赤い四角をOpacityウィジェットで囲い、
黄色いContainerに関してはcolorプロパティに.withOpacity(0.5)を追加して50%透過にしています。

主要なProperties

使えそうなプロパティを抜粋して紹介していきます( *˙ω˙*)و グッ!

Opacity

不透明度を 0.0 – 1.0 で指定します。

Point

0.0 が完全に透明な状態で、
1.0 が完全に表示された状態です!

Sample Code 2 – Stack Opacity –

ただ透過する使い方もアリですが、
背景色と透過した画像の位置を合わせて表示することで、
以下の様にエモい感じにもできます!

構造は背景色にカラフルなペイント画像の上に、
Opacity Widgetで透過したミッキーの手書き風画像を
Stack Widgetを使って重ねて表示しています!

※画像はこんなイメージ

Memo

Stackは複数の要素を重ねて表示できるWidgetです!
Stackについては別記事にて紹介します。

あとがき

お疲れ様でした!
これで透過で困ることはなさそうです(∩’-‘⊂)シュッ

AnimatedOpacityについては#50で紹介予定ですので、
しばしお待ちくださいませ!

次回はFutureBuilderの紹介です!
それでは次の記事で会いましょう!

Flutterカテゴリの最新記事