플러터 FittedBox 위젯으로 깔끔한 크기 조정과 레이아웃 관리하기

 

Flutter는 다양한 레이아웃 관리 도구를 제공하여 개발자들이 UI 요소를 효율적으로 배치할 수 있게 도와줍니다. 그중 FittedBox 위젯은 자식 위젯의 크기를 부모 위젯의 크기에 맞춰 조절하고 싶을 때 사용하기 좋은 도구입니다. 오늘은 FittedBox 위젯의 사용법과 다양한 옵션에 대해 알아보겠습니다.

 

FittedBox 위젯이란?

FittedBox는 Flutter에서 자식 위젯의 크기를 부모 위젯의 크기에 맞춰 조정하는 위젯입니다.

이를 통해 자식 위젯이 부모의 경계를 넘어가는 것을 방지하고, 다양한 크기와 해상도에서 깔끔한 레이아웃을 유지할 수 있습니다.

기본 사용법

FittedBox는 자식 위젯을 포함하며, 그 자식 위젯의 크기를 자동으로 조정합니다.

기본적으로 FittedBox는 자식의 크기가 부모의 크기에 맞게 조정되도록 돕습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FittedBoxExample(),
    );
  }
}

class FittedBoxExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter FittedBox Example')),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.blue,
          child: FittedBox(
            fit: BoxFit.contain,
            child: Text(
              'FittedBox',
              style: TextStyle(fontSize: 50, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

주요 속성 설명

1. child: FittedBox가 크기를 조정할 자식 위젯입니다.
2. fit: 자식 위젯의 크기를 부모 위젯의 크기에 맞추는 방식입니다.

FittedBox의 다양한 옵션

FittedBox는 자식 위젯을 부모의 크기에 맞추기 위해 fit 속성을 사용합니다.

BoxFit 클래스는 다양한 맞춤 옵션을 제공합니다. 다음은 그 옵션들의 설명입니다.

BoxFit 옵션

• contain: 자식 위젯의 크기를 부모의 크기에 맞추면서, 자식의 비율을 유지합니다. 자식이 부모를 넘지 않도록 조정합니다.
• cover: 부모 위젯을 완전히 덮을 수 있도록 자식을 크기를 조정합니다. 이 과정에서 자식의 일부가 잘릴 수 있습니다.
• fill: 부모 위젯의 크기에 맞게 자식 위젯의 크기를 늘이거나 줄입니다. 자식의 원래 비율이 유지되지 않을 수 있습니다.
• fitWidth: 부모 위젯의 너비에 맞춰 자식 위젯의 크기를 조정합니다. 높이는 자동 조정됩니다.
• fitHeight: 부모 위젯의 높이에 맞춰 자식 위젯의 크기를 조정합니다. 너비는 자동 조정됩니다.
• none: 자식 위젯의 크기를 변경하지 않고, 원래 크기로 유지합니다.
• scaleDown: 자식 위젯이 부모 위젯보다 클 경우에만 자식을 축소합니다.

FittedBox(
  fit: BoxFit.cover,
  child: Image.network('https://example.com/image.jpg'),
),

마무리

FittedBox 위젯은 Flutter에서 자주 사용되는 레이아웃 도구로, 다양한 화면 크기와 해상도에 대응하는 UI를 만들 때 매우 유용합니다.

다양한 fit 옵션을 통해 자식 위젯의 크기를 조정하여 원하는 레이아웃을 쉽게 구성할 수 있습니다.

 

이 글이 여러분의 Flutter 개발에 도움이 되었기를 바랍니다! 다양한 FittedBox 옵션을 활용하여 더 나은 사용자 경험을 제공하세요. 블로그를 구독하고, 최신 Flutter 팁과 튜토리얼을 놓치지 마세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱