1. 최소 크기에 강제됨

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. 최대 크기에 강제됨

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. 자식에게 크기를 주지 않으면?
- 최대 크기에 고정됨

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