Flutter入門

【5分でわかる】Cardの仕様と実装方法 | Flutter入門

本記事では、Cardの仕様と実装方法について解説をしていきます。

これから以下のようなCardウィジェットを活用したUIを実装してみたい方は是非参考ください。

実装イメージ

Cardウィジェットの仕様

立体的にオブジェクトを表現するにはCardウィジェットを使用すると便利です。

以下のような立体的なオブジェクトを作ることができ、このオブジェクトに文字列や画像情報を付け加えるとよくあるCardオブジェクトを実装できます。

Cardウィジェットの主要機能は以下のようになっています。

プロパティ内容
childcardウィジェットに設定する子要素(これがカード上に表示される情報になる)
colorカードの背景色
elevationカードを配置する場所
marginカードのマージン
shadowColorカードの影の色
shapeカードの角丸調整

Cardウィジェットを実装してみよう

今回はデフォルトのカウンターアプリを編集して、以下のようなUIをCardウィジェットで実装してみます。

main.dartを以下のように変更してください。

ポイント

Cardウィジェットの子要素として、縦にオブジェクトを配置するColumnを設定しています。

これによりCardウィジェットの中身を実装しています。

まとめ

いかがでしたか?

Flutterでは、非常に多くの場面でCardウィジェットを活用することができます。

是非この機会に習得して、UI表現を増やしてみてください。

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する