こんなのを作ります
![](https://tokku-engineer.tech/wp-content/uploads/2021/09/usercard-1024x319.png)
ダークモードだとこんな感じ
![](https://tokku-engineer.tech/wp-content/uploads/2021/09/usercard_dark-1024x341.png)
完成版のコード
いきなり完成版のコードです。
解説
まず冒頭部分ですがStatelessWidgetを継承して作成しています。
コンストラクタで各値を受け取るようにして、iconUrlはNullableで定義しています。
Cardウィジェットが一番親に居てshapeにRoundedRectangleBorderを指定することで、角を丸くしています。
またmarginを指定して上下に余白を持たせています。
![](https://tokku-engineer.tech/wp-content/uploads/2021/09/usercard_column-1024x576.png)
Columnを一つ挟んでSizedBoxでマージンを調整して、その下にRowで横方向に要素を並べています。
テキストはFlexibleで囲むことによって、長い文章の最大行数を指定しつつ、超えた部分は3点リードなどに自動で置き換えてくれるようになります。
overflow: TextOverflow.ellipsis,
maxLines: 3,
コメント