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 = // 여기에 코드 작성
예상 결과
이 튜토리얼을 완료하면:
- 고정 크기 위젯: SizedBox로 정확한 크기가 지정된 위젯
- 제약 조건 위젯: ConstrainedBox로 크기 범위가 제한된 위젯
- 복합 크기 제어: 두 위젯을 조합한 복잡한 레이아웃
추가 도전
반응형 크기 제어
화면 크기에 따라 다른 크기 제약을 적용하는 위젯을 만들어보세요.
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("정상 작동")
})
});
다음 단계
크기 제어를 익혔다면 다음 단계로 진행하세요:
- Align과 Center: 위젯의 정렬과 중앙 배치
- Padding과 Margin: 위젯 간격과 여백 제어
- Expanded와 Flexible: 유연한 레이아웃 구성
이제 SizedBox와 ConstrainedBox를 사용하여 위젯의 크기를 정확하게 제어할 수 있습니다!