Flutterの画像縦横比"BoxFit"をソフトバンクホークスのロゴ画像で検証

Flutterで画像を配置した際のサイズを指定に関して

f:id:jsaz:20181224181723p:plain:w480

FlutterでImageを使って画像を表示させる際、

縦横比"BoxFit"がどのようになっているのかを確認したくプログラムを書いてみた。

ドキュメントはコチラ

docs.flutter.io

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;
}