[Flutter] #8 - 플러터의 핵심 철학과 프로젝트 구조

Flutter의 핵심 철학과 프로젝트 구조

---

"Everything is a Widget" — Flutter의 핵심 철학

Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현합니다. 이 철학은 개발의 일관성과 효율성을 크게 높여줍니다. Flutter에서 UI는 "선언적 프로그래밍" 방식으로 구성되며, 이 방식을 통해 최종 상태만을 선언하고, Flutter가 이를 자동으로 렌더링합니다.

명령형 UI vs 선언형 UI

 

명령형 UI에서는 개발자가 각 UI 요소를 직접 명령하며 UI를 구성합니다. 예를 들어, ViewA와 ViewB를 선언하고, 속성을 지정하여 상태를 변경합니다.

ViewA a = ViewA();
ViewB b = ViewB();
a.setColor(red);   // 빨간색
b.setColor(yellow); // 노란색
a.add(b); // b는 a의 child로 추가

반면, 선언형 UI는 "어떠한 상태"를 선언하고, 그 상태를 Flutter가 자동으로 처리합니다. 예시로, 아래와 같이 최종 상태만을 선언하는 방식입니다.

return ViewA(
  color: red,
  child: ViewB(color: yellow),
);

이처럼, Flutter는 상태 변화에 따라 UI를 자동으로 업데이트하며, 개발자는 최종 상태 선언에만 집중하면 됩니다.

Flutter의 이점

• 상태 기반 UI 관리
• 효율적인 렌더링
• 복잡한 UI 업데이트 로직을 대신 처리하여 생산성 향상

 

---

Flutter 프로젝트 구조 이해하기

Flutter 프로젝트를 잘 개발하기 위해서는 기본적인 프로젝트 구조와 각 요소들을 잘 이해하는 것이 중요합니다.

1. 프로젝트 폴더 구조

• 플랫폼별 폴더: 각 플랫폼에 필요한 네이티브 코드가 포함됩니다. (android, ios, web 등)
• lib 폴더: 주요 Dart 코드가 위치합니다.
• pubspec.yaml: 프로젝트 설정, 의존성, 리소스 등을 관리하는 파일입니다.

2. 시작점 (Entry Point)

lib/main.dart 파일의 main() 함수가 앱의 시작점입니다. 새 프로젝트 시작 시, 기본 예제 코드는 삭제하고 자신만의 코드를 작성하는 것이 일반적입니다.

 

 

---

Flutter의 기본 위젯들

 

1. Layout 위젯

Flutter의 layout 위젯은 UI 요소를 원하는 위치에 배치하는 데 사용됩니다. 가장 기본적인 layout 위젯은 Container와 Center입니다. 이들은 UI 요소를 배치하고 크기를 설정하는 데 사용됩니다.

예시:

Center(
  child: Text('Hello World', textDirection: TextDirection.ltr),
)

2. Visible 위젯

• Text: 텍스트를 화면에 표시합니다.
• Image: 이미지를 표시합니다.
• Icon: 아이콘을 표시합니다.

이들은 UI 요소들을 보여주는 역할을 하며, layout 위젯 내에 배치될 수 있습니다.

3. Container 위젯

Container는 다양한 속성을 설정할 수 있는 기본 위젯입니다. 예를 들어, padding, margin, border, background color 등을 설정할 수 있습니다.

예시:

Container(
  color: Colors.amber,
  margin: EdgeInsets.all(10),
  child: Center(
    child: Text('Hello World', textDirection: TextDirection.ltr),
  ),
)

4. Row와 Column 위젯

• Row: 위젯들을 수평으로 배치합니다.
• Column: 위젯들을 수직으로 배치합니다.

Row와 Column은 여러 자식을 가질 수 있기 때문에, 자식 위젯들을 children 리스트로 선언하여 배치합니다.

예시:

Column(
  children: [
    Container(color: Colors.red, width: 50, height: 50),
    Container(color: Colors.blue, width: 50, height: 50),
  ],
)

5. mainAxisAlignment

Row와 Column 위젯에서 자식 위젯들을 정렬하는 방법을 설정할 수 있습니다.

• start: 주축의 시작점에서 자식 위젯 배치
• center: 주축의 중간에 자식 위젯 배치
• spaceBetween: 자식 위젯들 사이에 공간 균등 배치
• spaceAround: 자식 위젯들 사이에 공간을 균등하게 배치하고, 양 끝에는 균등한 공간의 절반을 배치
• spaceEvenly: 자식 위젯들 사이에 공간을 균등하게 배치하고, 양 끝에도 동일한 간격을 배치

6. BoxDecoration과 Border

Container 위젯에 BoxDecoration을 사용하여 border나 borderRadius 등을 설정할 수 있습니다.

예시:

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(color: Colors.amber, width: 5),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Center(
    child: Text('Hello World', textDirection: TextDirection.ltr),
  ),
)

---

Flutter 기본 앱 구조

Flutter 애플리케이션은 MaterialApp 위젯으로 시작합니다. 이를 통해 앱의 테마, 홈 화면 등을 설정할 수 있습니다.

주요 Property:

• theme: 앱의 전체 테마, 색상 구성 등을 설정
• home: 앱 시작 시 기본 경로 또는 위젯을 설정

MaterialApp(
  title: 'Flutter App',
  theme: ThemeData(primarySwatch: Colors.blue),
  home: Scaffold(
    appBar: AppBar(title: Text('Flutter App')),
    body: Center(child: Text('Hello World')),
  ),
)

---