SizedBox와 ConstrainedBox

위젯의 크기를 정확하게 제어하는 것은 UI 레이아웃에서 매우 중요합니다. Flitter에서는 SizedBox와 ConstrainedBox를 사용하여 위젯의 크기를 세밀하게 조정할 수 있습니다.

학습 목표

이 튜토리얼을 완료하면 다음을 할 수 있습니다:

  • SizedBox를 사용하여 위젯의 고정 크기 설정
  • ConstrainedBox를 사용하여 위젯의 크기 제약 조건 설정
  • 크기 제어 위젯을 조합하여 복잡한 레이아웃 구성
  • 최소/최대 크기 제약 조건의 차이점 이해

핵심 개념

SizedBox

SizedBox는 자식 위젯에게 고정된 크기를 제공하는 위젯입니다. 정확한 폭과 높이를 지정할 수 있으며, 크기가 고정되어야 하는 UI 요소에 적합합니다.

ConstrainedBox

ConstrainedBox는 자식 위젯에게 크기 제약 조건을 설정하는 위젯입니다. 최소/최대 크기를 지정하여 위젯이 특정 범위 내에서만 크기를 조정하도록 제한할 수 있습니다.

기본 사용법

SizedBox로 고정 크기 설정

import { SizedBox, Container, Text } from "@meursyphus/flitter";

const fixedSizeWidget = SizedBox({
  width: 200,
  height: 100,
  child: Container({
    color: '#3B82F6',
    child: Text("200x100 고정 크기")
  })
});

ConstrainedBox로 크기 제약 설정

import { ConstrainedBox, Constraints, Container, Text } from "@meursyphus/flitter";

const constrainedWidget = ConstrainedBox({
  constraints: new Constraints({
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 150,
  }),
  child: Container({
    color: '#10B981',
    child: Text("크기 제약이 있는 위젯")
  })
});

단계별 실습

1단계: SizedBox 기본 사용

먼저 간단한 SizedBox를 만들어보겠습니다.

import { SizedBox, Container, Text } from "@meursyphus/flitter";

const widget = SizedBox({
  width: 150,
  height: 80,
  child: Container({
    color: '#EF4444',
    child: Text("SizedBox 테스트")
  })
});

2단계: ConstrainedBox 적용

이제 ConstrainedBox를 사용하여 크기 제약을 추가해보겠습니다.

import { ConstrainedBox, Constraints, Container, Text } from "@meursyphus/flitter";

const widget = ConstrainedBox({
  constraints: new Constraints({
    minWidth: 120,
    maxWidth: 200,
    minHeight: 60,
    maxHeight: 100,
  }),
  child: Container({
    color: '#8B5CF6',
    child: Text("제약 조건 테스트")
  })
});

3단계: SizedBox와 ConstrainedBox 조합

두 위젯을 조합하여 더 복잡한 크기 제어를 구현해보겠습니다.

import { SizedBox, ConstrainedBox, Constraints, Container, Text } from "@meursyphus/flitter";

const widget = SizedBox({
  width: 250,
  height: 150,
  child: ConstrainedBox({
    constraints: new Constraints({
      minWidth: 200,
      maxWidth: 300,
      minHeight: 100,
      maxHeight: 200,
    }),
    child: Container({
      color: '#F59E0B',
      child: Text("조합된 크기 제어")
    })
  })
});

연습 문제

문제 1: 고정 크기 카드 만들기

SizedBox를 사용하여 200x120 크기의 카드 위젯을 만들어보세요.

// TODO: SizedBox를 사용하여 카드 위젯 구현
const cardWidget = // 여기에 코드 작성

문제 2: 유연한 크기 제약 적용

ConstrainedBox를 사용하여 최소 폭 100, 최대 폭 300, 최소 높이 50, 최대 높이 150인 위젯을 만들어보세요.

// TODO: ConstrainedBox로 유연한 크기 제약 구현
const flexibleWidget = // 여기에 코드 작성

문제 3: 복합 크기 제어

SizedBox와 ConstrainedBox를 조합하여 외부는 고정 크기, 내부는 유연한 크기를 가진 위젯을 만들어보세요.

// TODO: 복합 크기 제어 위젯 구현
const complexWidget = // 여기에 코드 작성

예상 결과

이 튜토리얼을 완료하면:

  1. 고정 크기 위젯: SizedBox로 정확한 크기가 지정된 위젯
  2. 제약 조건 위젯: ConstrainedBox로 크기 범위가 제한된 위젯
  3. 복합 크기 제어: 두 위젯을 조합한 복잡한 레이아웃

추가 도전

반응형 크기 제어

화면 크기에 따라 다른 크기 제약을 적용하는 위젯을 만들어보세요.

import { ConstrainedBox, Constraints, Container, Text } from "@meursyphus/flitter";

// 반응형 크기 제약 예제
const responsiveWidget = ConstrainedBox({
  constraints: new Constraints({
    minWidth: 150,
    maxWidth: 400,
    minHeight: 100,
    maxHeight: 250,
  }),
  child: Container({
    color: '#06B6D4',
    child: Text("반응형 크기 제어")
  })
});

중첩된 크기 제어

여러 단계의 크기 제어를 중첩하여 복잡한 레이아웃을 구성해보세요.

import { SizedBox, ConstrainedBox, Constraints, Container, Text } from "@meursyphus/flitter";

const nestedSizeControl = SizedBox({
  width: 300,
  height: 200,
  child: ConstrainedBox({
    constraints: new Constraints({
      minWidth: 250,
      maxWidth: 350,
      minHeight: 150,
      maxHeight: 250,
    }),
    child: SizedBox({
      width: 280,
      height: 180,
      child: Container({
        color: '#8B5CF6',
        child: Text("중첩된 크기 제어")
      })
    })
  })
});

흔한 실수

1. 제약 조건 충돌

// ❌ 잘못된 예: 제약 조건이 충돌
const conflictingConstraints = ConstrainedBox({
  constraints: new Constraints({
    minWidth: 200,
    maxWidth: 150, // 최소값보다 작은 최대값
  }),
  child: Container({
    child: Text("오류 발생")
  })
});

// ✅ 올바른 예: 일관된 제약 조건
const validConstraints = ConstrainedBox({
  constraints: new Constraints({
    minWidth: 150,
    maxWidth: 200, // 최소값보다 큰 최대값
  }),
  child: Container({
    child: Text("정상 작동")
  })
});

2. 불필요한 중첩

// ❌ 잘못된 예: 불필요한 SizedBox 중첩
const unnecessaryNesting = SizedBox({
  width: 200,
  height: 100,
  child: SizedBox({
    width: 200,
    height: 100,
    child: Container({
      child: Text("중복된 크기 설정")
    })
  })
});

// ✅ 올바른 예: 단순한 크기 설정
const simpleSize = SizedBox({
  width: 200,
  height: 100,
  child: Container({
    child: Text("간단한 크기 설정")
  })
});

3. Constraints 객체 생성 오류

// ❌ 잘못된 예: new 키워드 누락
const wrongConstraints = ConstrainedBox({
  constraints: Constraints({
    minWidth: 100,
    maxWidth: 200,
  }),
  child: Container({
    child: Text("오류 발생")
  })
});

// ✅ 올바른 예: new 키워드 사용
const correctConstraints = ConstrainedBox({
  constraints: new Constraints({
    minWidth: 100,
    maxWidth: 200,
  }),
  child: Container({
    child: Text("정상 작동")
  })
});

다음 단계

크기 제어를 익혔다면 다음 단계로 진행하세요:

  1. Align과 Center: 위젯의 정렬과 중앙 배치
  2. Padding과 Margin: 위젯 간격과 여백 제어
  3. Expanded와 Flexible: 유연한 레이아웃 구성

이제 SizedBox와 ConstrainedBox를 사용하여 위젯의 크기를 정확하게 제어할 수 있습니다!