[Flutter] Container

들어가며

Container 위젯이란?

• Container 위젯은 다양한 방법으로 다른 위젯을 조합하여 구성할 수 있는 위젯이다.
• 이 위젯은 다른 위젯을 포함하고 그 위젯들의 배치, 스타일링, 영역 사이즈 등을 결정하는데 사용된다.

Container 위젯 속성

• child: 컨테이너에 포함될 자식 위젯
• width: 컨테이너의 너비를 지정
• height: 컨테이너의 높이를 지정합니다.
• alignment: 자식 위젯의 정렬을 지정. 기본값은 Alignment.center
• margin: 컨테이너 주위의 외부 여백을 지정. EdgeInsets 객체 사용.
• padding: 컨테이너의 내부 여백을 지정. EdgeInsets 객체 사용.
• color: 컨테이너의 배경색을 지정
• decoration: 컨테이너의 장식을 지정. 배경색, 테두리, 그림자 등을 포함할 수 있다.
• constraints: 컨테이너의 크기 제약을 지정. 최소/최대 너비, 최소/최대 높이 등을 설정할 수 있다.
• transform: 컨테이너의 변형을 지정. 이동, 회전, 크기 조절 등을 지정할 수 있다.

EdgeInsets란?

• EdgeInsets는 여백(간격)을 나타내는 클래스이다.
• EdgeInsets.all(double value): 네 방향으로 동일한 값의 여백을 지정.
• EdgeInsets.only({double left, double top, double right, double bottom}): 각 방향별로 개별적으로 여백을 지정.
• EdgeInsets.symmetric({double vertical, double horizontal}): 상하 또는 좌우 방향으로만 동일한 값의 여백을 지정.

예제

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container Example'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 150,
              height: 150,
              color: Colors.blue,
              alignment: Alignment.bottomRight,
              margin: const EdgeInsets.symmetric(
                vertical: 10,
                horizontal: 30,
              ),
              padding: const EdgeInsets.all(20),
              child: const Text(
                'Hello!',
                style: TextStyle(color: Colors.white),
              ),
            ),
            Row(
              children: [
                Container(
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.green,
                    border: Border.all(color: Colors.greenAccent, width: 10),
                    // 테두리
                    borderRadius: BorderRadius.circular(20),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: const Offset(0, 3),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(10),
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.blue, Colors.green], // 그라디언트 색상
                    ),
                  ),
                ),
                Container(
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(10),
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage('https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

화면