컨테이너의 자식 제약조건

Stupefyee's avatar
Dec 27, 2024
컨테이너의 자식 제약조건

1. 최소 크기에 강제됨

notion image
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Constraints Example')), body: Center( // Center 위젯으로 중앙 정렬 child: Container( // 파란색 배경의 컨테이너 color: Colors.blue, // 컨테이너의 크기 제약 조건 설정 constraints: BoxConstraints( minWidth: 100, // 최소 너비 100 minHeight: 100, // 최소 높이 100 maxWidth: 200, // 최대 너비 200 maxHeight: 200, // 최대 높이 200 ), child: Container( // 빨간색 배경의 내부 컨테이너 color: Colors.red, width: 30, // 너비 30으로 고정 height: 30, // 높이 30으로 고정 child: Center( // 텍스트를 가운데 정렬 child: Text('Child'), // 'Child' 텍스트 표시 ), ), ), ), ), ); }

2. 최대 크기에 강제됨

notion image
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Constraints Example')), body: Center( // 중앙 정렬 child: Container( // 파란색 배경 color: Colors.blue, // 부모 컨테이너의 제약 조건 설정 constraints: BoxConstraints( minWidth: 100, // 최소 너비 100 minHeight: 100, // 최소 높이 100 maxWidth: 300, // 최대 너비 300 maxHeight: 100, // 최대 높이 100 ), // 자식 컨테이너 child: Container( // 빨간색 배경 color: Colors.red, width: 400, // 너비 400으로 설정 height: 400, // 높이 400으로 설정 child: Center( // 텍스트 중앙 정렬 child: Text('Child'), ), ), ), ), ), ); } }

3. 자식에게 크기를 주지 않으면?

  • 최대 크기에 고정됨
notion image
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Constraints Example')), body: Center( // 화면 중앙 정렬 child: Container( // 부모 컨테이너의 파란색 배경 color: Colors.blue, // 부모 컨테이너의 제약 조건 설정 constraints: BoxConstraints( minWidth: 100, // 최소 너비 100 minHeight: 100, // 최소 높이 100 maxWidth: 300, // 최대 너비 300 maxHeight: 300, // 최대 높이 300 ), // 자식 컨테이너 child: Container( // 자식 컨테이너의 빨간색 배경 color: Colors.red, // 자식 컨테이너의 크기 지정 없음 // 부모의 제약 조건 내에서 가능한 한 작게 렌더링 child: Center( // 텍스트를 중앙에 배치 child: Text('Child'), ), ), ), ), ), ); } }
Share article

stupefyee