【Flutter】Opacityの基本とサンプルコード

本記事では、Opacity widgetの基本的な使い方とサンプルコード、関連記事を説明します。

Flutterの公式動画の「Widget of the Week」をベースに日本語で説明しています。

本記事を読むメリット

  • Opacityの基本的な使い方や考え方がわかる
  • Opacityのサンプルコードを確認できる
  • 関連記事をトピック毎にまとめて確認できる

Opacityの基本的な使い方

要約

  • widgetのスペースを保持したまま非表示にしたい場合、Opacityを使おう
  • Opacityで透明度 (0~1)を指定することでwidgetの透明度を変えられる。
  • 透明度に0を指定すれば完全に透明になる。
  • Opacityの代わりにAnimatedOpacityを使うことで、アニメーションにも対応できる。

説明

Flutterの場合、widgetを完全に削除するのは簡単です。

単純にそのwidgetがない状態でrebuildするだけで、わざわざ削除の処理を書く必要はありません。

では、完全に削除するのではなく、widgetのスペースを保ったまま、非表示にしたい場合はどうすればいいでしょうか?
(iOSでいうところのhidden、Androidのinvisible

スペースを保ったまま、widgetを消したい

そんなときは、Opacity widgetを試してみてください。
使い方は、対象のwidgetをOpacityでラップし、opacityプロパティに0を指定するだけです。

消したいwidgetをOpacityでラップして、opacity値に0を指定する。
結果、スペースを保ったまま、widgetを非表示にできる。

Stackと組み合わせてOpacityを他のwidgetに重ねて使うこともできます。

image(画像)の上に透明度0.25のOpacityを重ねて、
猫のimageを不透明にできる。

もしあなたがOpacityを変化させるアニメーションを使いたい場合は、Opacityの代わりにAnimatedOpacity widgetを使うことができます。

opacityとdurationの値をセットするだけで使えます。
あとはあなたがrebuildしたタイミングで勝手に変更をアニメーションにしてくれるでしょう。

durationとopacityをセット
あとはsetStateとともに値を変更するだけ。

動画

サンプルコード

・Opacityを使ったシンプルなサンプルコード
 FlutterでVisibility widgetを作る – Qiita

・Buttonの透明度をOpacityで変えているサンプル
 How to Change Button Opacity in Flutter – InduceSmile

関連記事

・Opacity widgetを使わずに透明度を変えるパターン
 (ColorsにはwithOpacityがある。Color(0xFF0E3311).withOpacity(0.5))
 how to put opacity for container in flutter – Stack Overflow
 スペシャル | Flutter Doc JP

・Flutter 公式ドキュメント
 Opacity class – widgets library – Dart API – Flutter API

・関連書籍
 Flutterの基本的な仕組みや周辺知識(テストやCIなど)を網羅的に学べる入門書
 Flutter モバイルアプリ開発バイブル

・その他のwidgetについてはこちら
 カテゴリ-Flutter

以上、AnimatedContainerの基本的な使い方とサンプルコードでした。

 

こちらのプログラミング書籍もおすすめ
(若手プログラマー向け、コーディングのレベルが1段階アップ!)

レガシーコード改善ガイド

  • 特定の言語に限らず、プログラミング初心者で理論から学びたい方におすすめ
  • プログラムに不具合が発生する仕組みや原理を理解できます。
  • その結果、不具合に強いコードが理解でき、書けるようになります。
  • 既存動作を担保しつつ、ソースをリファクタするための方法論を知ることができます。
  • テーマはテストですが、コーディングのレベルアップにも大きく役立ちます

Head First Java 第2版 ―頭とからだで覚えるJavaの基本

  • Javaなどのオブジェクト指向プログラミングの初心者におすすめ
  • 初心者が躓きやすいポイントをわかりやすく解説(インターフェースオブジェクト指向ポリモーフィズムなど)
  • コードをシンプルに保つことができるようになる
  • ポリモーフィズムを利用した、拡張しやすいプログラムをつくることができるようになる。

 

この記事を書いた人

たかお

IT企業で開発者として6年経験を積んだ後、2019年からインドIT企業の日本法人でITコンサルにジョブチェンジ。
 
プログラミングはjava、js、html、cssあたりを仕事で6年くらい。
個人ではFlutterをいじってます。
学んだことを発信していきます。よろしくお願いします!
 
firebaseで簡単なタイピングアプリを作ってみました。
もしよければ遊んでみてください!
1位の記録や管理人(私)の記録と勝負できるようになってます!
 
タイピング・チャレンジャー
https://typing-challenger.com/