[Flutter/dart] 表示領域に合わせた画像の表示方法

概要

アプリで画像を表示させたい場合に、表示する領域に合わせて画像を表示する方法を解説します。

方法

1 縦横比はそのままに画面いっぱいに表示

width無限大のSizedBoxにimageを入れます。

Widget _myImg(){
  return SizedBox(
    width: double.infinity,
    child: Image.asset('image/person.png',),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child:_myImg()
    ),
  );
}

2 サイズの決まった領域に、その中いっぱいに表示

ImageをFittedBoxに入れ、fitプロパティをBoxFit.containにします。

Widget _myImg(){
  return FittedBox(
    fit: BoxFit.contain,
    child:
    Image.asset('image/person.png',),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(32),
        child: _myImg(),
        width: 200,
        height: 200,
      )
    ),
  );
}