Flutterの画像縦横比"BoxFit"をソフトバンクホークスのロゴ画像で検証
Flutterで画像を配置した際のサイズを指定に関して
FlutterでImageを使って画像を表示させる際、
縦横比"BoxFit"がどのようになっているのかを確認したくプログラムを書いてみた。
ドキュメントはコチラ
BoxFitは7つのタイプがあったので、それぞれタイプ名とそのタイプでの画像出力を下記のようなプログラムで検証してみた。
画像はソフトバンクホークスのロゴ画像を一瞬拝借。
※一部ソースは省略。 listViewItems()
を呼び出せば確認できる(はず)
ソースコード
// タイプ名とBoxFitのPropertyのクラスを定期 class BoxFitType { final String name; final BoxFit type; BoxFitType({this.name, this.type}); } // BoxFitType のリストを作成 List<BoxFitType> listBoxFitType = [ BoxFitType(name: "fill", type: BoxFit.fill), BoxFitType(name: "contain", type: BoxFit.contain), BoxFitType(name: "cover", type: BoxFit.cover), BoxFitType(name: "fitWidth", type: BoxFit.fitWidth), BoxFitType(name: "fitHeight", type: BoxFit.fitHeight), BoxFitType(name: "none", type: BoxFit.none), BoxFitType(name: "scaleDown", type: BoxFit.scaleDown) ]; //-途中省略- // リストを出力 List<Widget> listViewItems() { List<Widget> listWidget = []; for (var boxFitType in listBoxFitType) { print(boxFitType.name); listWidget.add(SizedBox( height: 70.0, child: Container( color: Colors.black38, padding: EdgeInsets.all(8.0), child: ListTile( leading: Image.network( "http://www.softbankhawks.co.jp/pc/_pl_img/footer/logo_footer_l02.png", height: 60.0, width: 60.0, fit: boxFitType.type), title: Text(boxFitType.name), )), )); } return listWidget; }
画面
リストにBoxFitTypeをループして出力している。
画像は高さ60、幅60で指定しており、上からfill
, contain
, cover
, fitWidth
, fitHeight
, none
, scaleDown
となっている
こういう場合は cover
を使うべきなのかな。