[2.6 ~ 2.7] 기본 위젯 알아보기 ~ 앱을 만들려면 알아야 하는 그 밖의 지식

6장. 기본 위젯 알아보기

6.1 위젯 소개

Flutter의 핵심 문구는 "Everything is a Widget"이다. 즉, 화면에 보여지는 모든 요소가 위젯으로 구성된다. Flutter는 위젯을 통해 화면을 구성하고, 상태에 따라 화면을 다시 그려주는 방식으로 동작한다.

자식 위젯을 1개만 갖는 위젯은 child, 여러 개를 갖는 위젯은 children 매개변수를 사용한다.

6.1.1 child vs children 차이

예제 - child

Center(
  child: Text('Code Factory'),
)

• Center 위젯은 자식 위젯을 가운데 정렬하는 역할을 한다.
• child 키워드를 통해 Text 위젯을 하나만 넣을 수 있다.

예제 - children

Column(
  children: [
    Text('Code'),
    Text('Factory'),
  ],
)

• Column 위젯은 세로로 위젯을 배치하는 위젯이다.
• children 키워드로 여러 개의 자식 위젯을 전달할 수 있다.

---

6.3 텍스트 관련 위젯

Text 위젯 예제

Text(
  '코드팩토리',
  style: TextStyle(
    fontSize: 16.0,
    fontWeight: FontWeight.w700,
    color: Colors.blue,
  ),
)

• Text 위젯은 문자열을 화면에 출력하는 역할을 한다.
• TextStyle을 사용하면 글자 크기(fontSize), 두께(fontWeight), 색상(color) 등을 지정할 수 있다.

---

6.4 제스처 관련 위젯

TextButton 예제

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.red,
  ),
  child: Text('텍스트 버튼'),
)

• TextButton은 글자만 있는 버튼이다.
• onPressed에 함수가 전달되면 버튼 클릭 시 해당 함수가 실행된다.
• style을 통해 색상 등을 지정할 수 있다.

GestureDetector 예제

GestureDetector(
  onTap: () {
    print('on tap');
  },
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
)

• GestureDetector는 클릭, 드래그 등의 이벤트를 감지하는 위젯이다.
• child로 감싸는 위젯에 대한 이벤트를 처리할 수 있다.

---

6.5 디자인 관련 위젯

Container 예제

Container(
  width: 100.0,
  height: 200.0,
  decoration: BoxDecoration(
    color: Colors.red,
    border: Border.all(
      width: 16.0,
      color: Colors.black,
    ),
    borderRadius: BorderRadius.circular(16.0),
  ),
)

• Container는 레이아웃과 디자인을 담당하는 가장 많이 쓰이는 위젯이다.
• decoration을 통해 배경색, 테두리, 모서리 둥글기 등을 설정할 수 있다.

SizedBox 예제

SizedBox(
  width: 200.0,
  height: 200.0,
  child: Container(color: Colors.red),
)

• SizedBox는 공간을 확보하는 위젯이다.
• child로 다른 위젯을 감쌀 수 있다.

Padding 예제

Padding(
  padding: EdgeInsets.all(16.0),
  child: Container(
    width: 50.0,
    height: 50.0,
    color: Colors.red,
  ),
)

• Padding은 자식 위젯과 외부 사이에 여백을 주는 위젯이다.
• EdgeInsets를 통해 여백 크기를 지정한다.

---

6.6 배치 관련 위젯

Row 예제

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    SizedBox(width: 12),
    Container(width: 50, height: 50, color: Colors.green),
  ],
)

• Row는 수평으로 위젯을 배치한다.
• mainAxisAlignment로 정렬 방식을 지정할 수 있다.

Column 예제

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    SizedBox(height: 12),
    Container(width: 50, height: 50, color: Colors.green),
  ],
)

• Column은 수직으로 위젯을 배치한다.

Stack 예제

Stack(
  children: [
    Container(width: 300, height: 300, color: Colors.red),
    Container(width: 250, height: 250, color: Colors.yellow),
    Container(width: 200, height: 200, color: Colors.blue),
  ],
)

• Stack은 위젯을 겹쳐서 배치할 때 사용하는 위젯이다.
• 자식 위젯이 위에서 아래 순서로 쌓인다.

---

7장. Flutter 개발 흐름과 실습

7.1 개발 프로세스

1. 기획 및 설계 - 어떤 기능이 필요한지 기획
2. 구현 - 기능을 Flutter로 코드 작성
3. 테스트 및 유지보수 - 오류 수정 및 최적화

7.2 플러그인 추가 방법

pubspec.yaml 파일에 플러그인 추가

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: 2.3.1

터미널 명령어

flutter pub get

• 외부 라이브러리를 추가한 후 반드시 flutter pub get 명령어를 실행하여 적용한다.

---

7.4 실습 - 스플래시 화면 만들기

전체 코드 예시

import 'package:flutter/material.dart';

void main() {
  runApp(SplashScreen());
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Color(0xFFF99231),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/logo.png',
                width: 200,
              ),
              CircularProgressIndicator(),
            ],
          ),
        ),
      ),
    );
  }
}

코드 설명

• runApp() 함수를 통해 앱 실행을 시작한다.
• SplashScreen 클래스는 StatelessWidget으로, 변하지 않는 스플래시 화면을 구성한다.
• Container로 배경 색상을 지정하고 Column으로 자식 위젯을 수직 배치한다.
• Image.asset()으로 로고 이미지 출력
• CircularProgressIndicator()로 로딩 애니메이션 표시

---

이와 같이 6장과 7장은 Flutter 개발의 기초가 되는 위젯 이해 및 Flutter 앱 개발 프로세스를 학습하기 위한 실습 예제들로 구성되어 있다. 각 코드 예제와 그에 대한 부가 설명을 통해 Flutter 개발자라면 반드시 익혀야 할 핵심 개념들을 정리하였다.