Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

Flutterラボの

プレミアム会員になる

【Flutter】Containerにelevationをつける

2020.10.27

Flutterに関する毎日投稿を1ヶ月半続けています。
初心者から中級者に向けてアプリ開発に関する知識を発信しているので、よければ他の記事もご覧ください。

Flutter Daily|Hatchout School@Flutter毎日更新|note Flutterに関する記事を毎日更新しています note.com

YouTubeでもFlutterについての動画を公開しているのでそちらもチェックしてみてください。

ハッチアウトスクール 【Flutter アプリ開発】 Flutterエンジニアを目指す! Flutterに対する興味がある! Flutterって何?教えて先生! そんな皆様に楽 www.youtube.com

本日のお題は、elevationを付け方についてです。

AppBarやCardのようなウィジェットには、elevationプロパティが用意されており、ウィジェットが浮いているような影を付けることができます。

Card(
 elevation: 20.0,
 child: Container(width: 120, height: 100,),
)

画像1

しかし、Container等のウィジェットにはelevationプロパティが無いのでそのままelevationを設定することができません。

そういった場合は、Materialウィジェットで囲うことで解決することができます。

Material(
 elevation: 20.0,
 child: Container(width: 120, height: 100,)
)