Flutter 일기 54번째
참고 : https://api.flutter.dev/flutter/painting/BoxFit.html






난 Flutter를 마구잡이로 배웠기 때문에, 기초를 한 번 다져볼 겸 Udemy의 강의를 구매했다. 역시 기초부터 해준다. App Icon 설정하는 방법을 이번에 처음 알게 되었으니...

Image 위젯 띄우는 방법을 가르쳐줬으니 이번엔 이미지를 다른 걸로 알아서 바꿔보라고 한다. Image 위젯에 띄울 그림은 쉽게 바꿨는데, 왜인지 애가 너무 작다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('I Am Plant'),
          backgroundColor: Colors.blueGrey[900],
        ),
        body: const Center(
          child: Image(
            height: 300,
            image: AssetImage('images/icons8_plant.png'),
          ),
        ),
      ),
    ),
  );
}

머쓱

내가 다운받은 png 파일의 아이콘 크기는 24 x 24 라서, 화면에 띄우니 아주아주 작게 나왔다. 좀 더 화면에 꽉 차게 나왔으면 좋겠는데...

BoxFit

Image 위젯의 속성 중에 fit이라는 것이 있다.
fit 에는 BoxFit 타입이 들어가는데, 나는 최대한 크게 나왔으면 좋겠어서 아래와 같이 속성값을 변경해주었다.

fit : BoxFit.cover

BoxFit은 위젯이 차지할 수 있는 범위 내에서 적용되기 때문에, width | height 값을 같이 설정해야 크기를 변경할 수 있다.
width, height만 설정한다고 해서 위젯이 크게 나오는 게 아니다.

child: Image(
   height: 300,
   image: AssetImage('images/icons8_plant.png'),
   fit: BoxFit.cover,
 ),
          

fit 속성 적용 안함	fit 속성 적용

이외에도 다양한 BoxFit 값을 설정할 수 있는데,
https://api.flutter.dev/flutter/painting/BoxFit.html
여기에 방문하면 그림 예시도 그려져 있다.