flutter & dart - AspectRatio , ClipRRect

OverView 

1. AspectRatio
2. ClipRRect

 

1. AspectRatio

AspectRatio로 이미지 비율 정하기

특정 종횡비로 자식 크기를 조정하는 위젯입니다. 이미지를 화면에 표시할 때는 비율로 표시하는 것이 좋습니다. AspectRatio 위젯은 먼저 레이아웃 제약에서 허용하는 가 장 큰 너비를 시도합니다. 위젯의 높이는 지정된 가로 세로 비율을 너비에 적용하여 결정되며 너비와 높이의 비율로 표 현됩니다. 예를 들어 넓이가 300이고 높이가 600인 화면이 있을 때 이 미지에 AspectRatio 위젯을 적용하여 비율을 2/1로 주게 되 면 넓이 300의 비율이 2가 되기 때문에 높이는 300의 절반 인 150이 됩니다.

        children: [
          AspectRatio(
            aspectRatio: 2 / 1,
            child: Image.asset(
              "assets/images/${imageName}",
              fit: BoxFit.cover,
            ),
          ),
        ],

 

 

2. ClipRRect

ClipRRect 위젯으로 이미지 모서리에 곡선 주기

둥근 사각형을 사용하여 자식을 자르는 위젯입니다. Clip은 자르다는 의미이고, R은 Round의 의미 이고 Rect는 사각형의 의미입니다. 사각형을 둥글게 잘라주는 위젯이 ClipRRect 위젯입니다. 위젯에 shape나 decoration 속성이 없다면 ClipRRect을 이용하여 모서리에 곡선을 줄 수 있습니다. Container 위젯 같은 경우는 decoration 속성이 있기 때문에 ClipRRect 위젯을 사용할 필요가 없습니다.

 

한마다로 변화를 주고 싶을 때 사용합니다.

 

        children: [
          AspectRatio(
            aspectRatio: 2 / 1,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.asset(
                "assets/images/${imageName}",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],