Flutter 기초 - Container, Center Widget (11)

 

Flutter 기초 - Container, Center Widget (11)

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Study to Container'),
        ),
        body: CustomContainer(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        padding: EdgeInsets.fromLTRB(10, 12, 10, 12),
        decoration: BoxDecoration(
          color: Color(0xFF85D07B),
          border: Border.all(color: Colors.red, width: 5, style: BorderStyle.solid),
          borderRadius: BorderRadius.circular(100),
          boxShadow: [
            BoxShadow(color: Colors.black.withOpacity(0.3), offset: Offset(6, 6), blurRadius: 10, spreadRadius: 10),
            BoxShadow(color: Colors.blue.withOpacity(0.3), offset: Offset(-6, -6), blurRadius: 10, spreadRadius: 10),
          ]
        ),
        child: Center(
          child: Container(
            color: Colors.yellow,
            child: Text('Hello Container'),
          ),
        ),
      ),
    );
  }
}

 

1. Container

크기 조정	width, height 로 크기 지정
Padding	내부 자식 위젯과 Container 경계 사이의 공간을 설정
Decoration	배경색, 테두기, 둥근 모서리, 그림자 등을 지정

 

width, height : 300 정사각형

pading: EdgeInstets.fromLTRB : 모든 방향에 패팅을적용

decoration: BoxDecoration : 배경색, 테두리, 모서리, 그림자

 

2. Center Widget 

 - 자식 위젯을 자신의 중앙에 위치시키는 레이아웃 위젯으로 주로 정렬 목적으로 사용되며 크기에 상관없이 중아에 배치한다.