`Container`는 Flutter에서 매우 유용한 위젯으로, 레이아웃을 구성하고, 배경 색상이나 크기, 패딩 등을 설정하는 데 사용됩니다. `Container`는 여러 속성을 가지고 있어 다양한 역할을 수행할 수 있습니다.
주요 속성
1. **child**
– `Container` 안에 배치될 단일 자식 위젯을 지정합니다.
2. **padding**
– `Container`의 내용 주위에 여백을 설정합니다.
– `EdgeInsets` 클래스를 사용하여 설정합니다.
3. **margin**
– `Container` 주위의 외부 여백을 설정합니다.
– `EdgeInsets` 클래스를 사용하여 설정합니다.
4. **color**
– `Container`의 배경 색상을 설정합니다.
5. **decoration**
– `Container`의 외관을 설정합니다. `BoxDecoration` 클래스를 사용하여 배경 이미지, 경계선, 그림자 등을 추가할 수 있습니다.
6. **width** 및 **height**
– `Container`의 너비와 높이를 설정합니다.
7. **alignment**
– 자식 위젯의 정렬을 설정합니다.
8. **constraints**
– `Container`의 크기 제약 조건을 설정합니다. `BoxConstraints` 클래스를 사용합니다.
예제 코드
`Container`의 기본 사용법과 다양한 속성을 설정하는 예제를 통해 이해를 돕겠습니다.
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('Flutter Container Example'),
),
body: Center(
child: Container(
width: 200,
height: 200,
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.black,
width: 3,
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Text(
'Hello, Container!',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
textAlign: TextAlign.center,
),
),
),
),
);
}
}
코드 설명
– `Container` 위젯을 사용하여 다양한 속성을 설정합니다.
– `width`와 `height`를 200으로 설정하여 크기를 지정합니다.
– `padding`과 `margin`을 각각 `EdgeInsets.all(20)`으로 설정하여 내부 여백과 외부 여백을 추가합니다.
– `alignment`를 `Alignment.center`로 설정하여 자식 위젯을 중앙에 정렬합니다.
– `decoration` 속성을 사용하여 `BoxDecoration` 클래스로 배경 색상, 테두리, 그림자를 설정합니다.
– `color`를 `Colors.blue`로 설정하여 배경 색상을 파란색으로 지정합니다.
– `borderRadius`를 `BorderRadius.circular(10)`으로 설정하여 모서리를 둥글게 만듭니다.
– `border`를 사용하여 검은색 테두리를 추가합니다.
– `boxShadow`를 사용하여 그림자를 추가합니다.
– 자식 위젯으로 `Text`를 추가하여 `Container` 안에 텍스트를 표시합니다.
이 예제는 `Container`의 다양한 속성을 어떻게 설정하는지 보여줍니다. `Container`는 매우 유연한 위젯으로, 레이아웃을 구성할 때 유용하게 사용할 수 있습니다.