[Flutter/dart] Image display method according to the display area

Overview

If you want to display an image in the app, I will explain how to display the image according to the area to be displayed.

Method

1 The aspect ratio remains the same and the image is displayed on the full screen

Put the image in a SizedBox with infinite width.

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 Display in a fixed size area

Put the Image in a FittedBox and set the fit property to 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,
      )
    ),
  );
}