[Flutter] FittedBox Widget 에 대해서... (컨텐츠 공간에 맞춤)

 

FittedBox Widget

FittedBox child 컨텐츠를 FittedBox 부모 사이즈에 맞춰줄때 사용하는 간단한 위젯 입니다.

 

 

 

 

 

사용전 

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.green,
        child: Text('123456789'),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.amber,
      ),
    )
  ],
)

 

 

 

 

적용 후

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.green,
        child:
            FittedBox(fit: BoxFit.fitWidth, child: Text('123456789')),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.amber,
      ),
    )
  ],
)

 

 

 

적용 후   (가로 가이즈 기준으로 적용)

FittedBox(fit: BoxFit.fitWidth, child: Text('123456789'))

보시면 Text에 별다른 설정을 하지 않아도 상위 위젯의 사이즈에 맞춰지게 됩니다.

fit - 맞춤 기준 , alignment - 정렬  설정할 수 있습니다. 

 

 

 

 

 

https://api.flutter.dev/flutter/widgets/FittedBox-class.html

FittedBox class - widgets library - Dart API