top of page

[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,
      )
    ),
  );
}


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

댓글


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page