![[flutter]Container, Column, Align 속성](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-10-10T03%3A11%3A23.500Z-28a07b64-0189-4419-a91b-63f7265dfcd1&w=3840&q=75)
Contents
Align각 공간을 차지하는
Container, Column, Align, ListView 이 갖고 있는 특징과
원하는 화면 구성을 하기 위한 설정을 알아본다.
body: ListView(
children: [
Container(
height: 300,
width: 300,
color: Colors.yellow,
child: Container(
),
),
],
),
body: ListView(
children: [
Container(
height: 300,
width: 300,
color: Colors.yellow,
child: Container(
height: 200,
width: 200,
color: Colors.red,
),
),
],
),
body: Column(
children: [
Container(
height: 300,
width: 300,
color: Colors.yellow,
child: Container(
height: 200,
width: 200,
color: Colors.red,
),
),
],
),
ListView 는 부모의 크기만큼 늘어난다.
(리스트뷰는 가로→ 부모의 크기, 세로→무한히 펼쳐진다)
Column은 부모 상관없이 자식의 크기만큼 잡힌다.
(세로→ 자식의 넓이만큼, 세로→ 끝까지 펼쳐진다)
Column
컬럼의 기본정렬은 센터이다. 따라서 왼쪽에 두려면 스타트로 스타일을 바꿔야한다.
body: Column(
children: [
Text('안녕'),
],
),
body: Column(
children: [
Text('안녕'),
Container(
height: 300,
width: 300,
color: Colors.yellow,
),
],
),
body: Column(
children: [
Row(),
Text('안녕'),
Container(
height: 300,
width: 300,
color: Colors.yellow,
),
],
),
body: Column(
children: [
Row(),
Text('안녕'),
Container(
height: 300,
width: 300,
color: Colors.yellow,
),
Row(
children: [
Text("안녕"),
],
),
],
),
body: Column(
children: [
Row(),
Text('안녕'),
Container(
height: 300,
width: 300,
color: Colors.yellow,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text("안녕"),
],
),
],
),Align
Align(
alignment: Alignment.bottomLeft,
child: Text("안녕"),
)이런 것을 제약조건이라고 하는데 바로 위 부모의 속성에 연관받는다.
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,
minHeight: 100,
maxWidth: 200,
maxHeight: 200,
),
child: Container(
color: Colors.red,
width: 30,
height: 30,
child: Center(child: Text('Child')),
),
),
),
),
);
}
}
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,
minHeight: 100,
maxWidth: 200,
maxHeight: 200,
),
),
),
),
);
}
}
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,
height: 50,//추가
constraints: BoxConstraints(
minWidth: 100,
minHeight: 100,
maxWidth: 200,
maxHeight: 200,
),
),
),
),
);
}
}기본적으로 maxWidth 가 잡힌다
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,
height: 50,
width: 50,// 추가
constraints: BoxConstraints(
minWidth: 100,
minHeight: 100,
maxWidth: 200,
maxHeight: 200,
),
),
),
),
);
}
}
double.infinity
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,
height: 50,
width: 50,// 추가
constraints: BoxConstraints(
minWidth: double.infinity,
minHeight: 100,
maxWidth: double.infinity,
maxHeight: 200,
),
),
),
),
);
}
}blue 의 컨테이너 크기가 (지금 50인 값)
자식이 없는 컨테이너는 최대한 크기를 크게 만들려 한다.
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,
),
),
),
);
}
}
두번째, 자식이 있는 컨테이너는 자식의 크기에 맞춰진다.
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,
child: Text("안녕"),
),
),
),
);
}
}
세번째,
부모에 크기가 없을 때는 자식의 크기를 따라간다.
그러나 부모의 크기가 있다면 자식은 부모의 크기를 따라간다.
이부분이 안먹는다
이때
Align 을 사용해야함
Share article