1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ListTileでBoxFit.coverを指定したのにサムネイルが拡大されない問題の対処

Last updated at Posted at 2021-01-18

FlutterのListTileはマテリアルデザインに沿ったリストを作成するのに便利ですが、leadingに画像を配置するとBoxFit.coverを指定しているのにもかかわらずサムネイルが思ったように拡大しません。(高さに制限がかかっているらしい?)

listtile.dart
child: ListTile(
        leading: Container(
          child: Image.network(listModel.thumbnail, fit: BoxFit.cover,),
        ),
list1

サムネイルを拡大したい場合はRowとColumnを使います。
Rowで縦に区切るイメージです。画像のサイズはContainerのwidthとheightで変更します。

row.dart
child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            width: 90,
            height: 90,
            child: Image.network(listModel.thumbnail, fit: BoxFit.cover),
          ),
list2

この記事を書くにあたって作成したサンプルコードを置いておきます。
https://gist.github.com/Hecatier/2c73c29a15f284340e4ffffd5a1d3f1f

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?