タグ

ブックマーク / note.com/iwatsuru (1)

  • CardとListTileっぽいWidgetの書き方|Shinichiro Iwatsuru

    FlutterのCardとListTileを使えばよくあるこんなカード型のViewがかんたんに実現できます。 ですが、実現したいデザインと少し違う場合は、ListTileを使わずにColumnとRowを組み合わせることになると思います。公式のListTileクラスでサンプルを確認できます。 ContainerとColumnとRowを組み合わせた素振りをしてみます。以下のようなデザインにしたいと思います。 ・カードをタップしたらリップルエフェクトを効かせる ・リップルエフェクトの色とカード背景色をそれぞれ指定したい ・カードは角丸&シャドウをつける ・画像はウェブからダウンロードして表示するColumnとRowのレイアウト Rowで画像とテキスト領域を縦分割し、テキスト領域はColumnで積み重ねていきます。RowとColumnのmainAxisAlignmentはMainAxisAlign

    CardとListTileっぽいWidgetの書き方|Shinichiro Iwatsuru
  • 1