본문 바로가기
공부방/Flutter

[Flutter] Container위젯(함수)

by SmartCow 2024. 3. 17.

1. Container위젯(함수)란?

다른 위젯을 감싸고 설정할 수 있는 강력한 위젯. 이를 통해 UI의 모양과 레이아웃을 제어할 수 있다. Container는 많은 속성을 가지고 있어서 다양한 스타일과 레이아웃을 만들 수 있다.

2. 주요속성

속성 설명
alignment 컨테이너 내부의 자식 위젯 정렬방식 설정
color 컨테이너의 배경색 설정
width 컨테이너의 너비 설정
height 컨테이너의 높이 설정
padding 컨테이너의 내부 여백 설정
margin 컨테이너 외부 여백 설정
decoration 컨테이너의 그림자, 테두리, 그라데이션 등의 효과 추가

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('Container 위젯 예제'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            alignment: Alignment.center,
            color: Colors.blue,
            padding: EdgeInsets.all(20),
            margin: EdgeInsets.all(30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3),
                ),
              ],
            ),
            child: Text(
              '안녕하세요!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Container 위젯을 사용하여 만들어진 가운데로 정렬된 파란색의 상자.
상자에는 '안녕하세요!'라는 텍스트가 포함되어 있다.
Container의 속성을 변경하여 원하는 스타일과 레이아웃을 만들 수 있다.