いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- Visibilityウィジェットの基本的な使い方
- ボタンを領域ごと非表示にする方法
- ボタンを領域を残して非表示にする方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
Visibilityウィジェットの基本
概要
Visibilityウィジェットは、指定した子ウィジェットの表示・非表示を制御するために使用します。簡単なサンプルコードでその基本的な使い方を見てみましょう。
サンプルコード
Visibility(
visible: true, // このウィジェットを表示するか否か
child: Text('これはVisibilityウィジェットのデモです'),
)サンプルコードの解説
- 1行目:
Visibilityウィジェットを使用します。このウィジェットで子要素の表示・非表示を制御します。 - 2行目:
visibleプロパティをtrueまたはfalseに設定して、子ウィジェットの表示・非表示を切り替えます。 - 3行目:
childプロパティで表示したいウィジェットを指定します。この例ではテキストウィジェットを使用しています。
ボタンを領域ごと非表示にする方法
概要
ボタンを含むウィジェットを完全に非表示にするときは、Visibilityウィジェットのvisibleプロパティをfalseに設定します。ここでのポイントは、非表示にした際にボタンが占めていた領域も同時に非表示にすることです。
サンプルコード
Visibility(
visible: false, // ボタンを非表示に設定
child: ElevatedButton(
onPressed: () {},
child: Text('非表示にするボタン'),
),
)サンプルコードの解説
- 1行目:
Visibilityウィジェットを使用して、子ウィジェットの表示・非表示を制御します。 - 2行目:
visibleプロパティをfalseにすることで、子ウィジェットを非表示にします。 - 3-6行目:
childプロパティにElevatedButtonウィジェットを設定し、ボタンを定義します。このボタンは非表示に設定されます。
領域を残してボタンを非表示にする方法
概要
場合によっては、ボタンを非表示にしつつも、その占めていた領域は保持したい場合があります。これは、UIのバランスを保つために有効なテクニックです。Visibilityウィジェットには、このような場合に役立つmaintainSizeプロパティがあります。
サンプルコード
Visibility(
visible: false,
maintainSize: true, // 領域を保持しながら非表示にする
maintainAnimation: true,
maintainState: true,
child: ElevatedButton(
onPressed: () {},
child: Text('非表示だけど領域は残すボタン'),
),
)サンプルコードの解説
- 1行目:
Visibilityウィジェットを使用します。 - 2行目:
visibleプロパティをfalseに設定して、子ウィジェットを非表示にします。 - 3行目:
maintainSizeをtrueに設定して、ウィジェットが非表示でもそのスペースを保持します。 - 4-5行目:
maintainAnimationとmaintainStateをtrueに設定して、ウィジェットの状態とアニメーションを保持します。 - 6-9行目:
childにElevatedButtonウィジェットを配置して、ボタンを定義します。
まとめ
いかがでしたでしょうか？今回は、Visibilityの基本からボタンを領域ごと非表示にしたり領域を残して非表示にする方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント