[Flutter] 기본위젯 (Text,Container,EdgeInsets ,boxDecoration) 사용법

원하는 위치에 원하는 요소를 배치하는 작업을 레이아웃(layout)이라고 부릅니다.

 

1. Text

Text(
  '텍스트 위젯',
  style: TextStyle(
    fontSize: 35, // 폰트 크기
    fontWeight: FontWeight.bold, // 폰트 두께
    color: Colors.amber, // 폰트 색상
  ),
),

 

 

2. Container

Container는 Box 형태의 기본적인 위젯으로 다방면으로 많이 사용됩니다.

Container(
  width: 200, // 폭
  height: 200, // 높이
  color: Colors.pinkAccent, // 박스 색상
  child: Text("I Love Flutter!"), // 자식 위젯
),

margin & padding & alignment

 

margin : 박스 바깥 영역
padding : 박스 안쪽 영역
alignment : child 정렬

 

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          width: 200,
          height: 200,
          color: Colors.pinkAccent, // 박스 색상
          padding: EdgeInsets.all(20), // 박스 안쪽 영역
          margin: EdgeInsets.all(50), // 박스 바깥 영역
          alignment: Alignment.topLeft, // child 정렬
          child: Text(
            "I Love Flutter!",
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

4.EdgeInsets 사용법

 

전방위 모두 동일하게 적용

EdgeInsets.all(8)


특정 방위만 적용
EdgeInsets.only(
  left: 8,
  right: 8,
)


위아래 또는 좌우 적용
EdgeInsets.symmetric(
	vertical: 8,
	horizontal: 8,
)

 

 

5.boxDecoration사용법

boxDecoration : Container의 테두리(border), 그림자, 색상 등을 꾸밀 때 사용합니다.

 

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            // color : Colors.amber, // decoration와 함께 사용 불가
						decoration: BoxDecoration(
              color: Colors.amber, // decoration 안에 color를 활용해주세요.
              borderRadius: BorderRadius.circular(50), // 모서리를 둥글게
              border: Border.all(color: Colors.blue, width: 5), // 테두리	
							boxShadow: [
                BoxShadow( // 그림자 효과
                  color: Colors.grey.withOpacity(0.7), // 투명도 70% 회색
                  spreadRadius: 5, // 퍼짐 효과
                  blurRadius: 7, // 뭉갬 효과
                  offset: Offset(5, 5), // 그림자를 우측 5 아래 5만큼 이동
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

 

아래와 같이 color와 decoration을 동시에 사용하면 애러가 나옵니다.

 

Container(
	color: Colors.amber,
  decoration: BoxDecoration(),
),

DartPad에서는 위 상황에서 애러 메세지가 안나오지만, 실제 VSCode에서 코딩할 때에는 color와 decoration을 동시에 사용할 수 없습니다고 에러 메세지가 나옵니다

 

에러가 나지않게 하려면 아래와 같이 color를 decoration 안에 넣으면 됩니다.

 

 

Container(
	decoration: BoxDecoration(
		color: Colors.amber,
	),
),