👨‍💻 [Flutter] Flutter 의 기본 구성 구조는 어떻게 되나요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter 의 기본 구성 구조는 어떻게 되는지 간략히 알아보았습니다.

---

질문 >

Flutter 의 기본 구성 구조는 어떻게 되나요?

답변 >

Flutter 애플리케이션의 기본 구성 구조는 위젯 트리로 이루어져 있으며, 애플리케이션의 화면과 UI 요소를 계층적으로 구성합니다. 이 구조는 Flutter 앱의 시작부터 UI를 렌더링하는 데 사용되며, 다음과 같은 주요 구성 요소들로 이루어져 있습니다.

---

1. Entry Point: main() 함수

Flutter 애플리케이션은 Dart 언어로 작성되며, 프로그램의 시작 지점은 항상 main() 함수입니다. 여기에서 Flutter의 runApp() 함수를 호출하여 앱의 루트 위젯을 실행합니다.

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

---

2. 루트 위젯: MaterialApp 또는 CupertinoApp

runApp() 함수는 루트 위젯을 화면에 렌더링합니다. 보통 Flutter 애플리케이션의 루트 위젯으로 MaterialApp이나 CupertinoApp을 사용합니다. 이 위젯들은 앱의 전반적인 테마, 라우팅, 네비게이션 등의 설정을 관리합니다.

• MaterialApp:
  • Google의 Material Design을 기반으로 한 Flutter 앱에서 사용됩니다.
  • Android 스타일의 UI를 구현할 때 주로 사용합니다.
• CupertinoApp:
  • Apple의 iOS 디자인 가이드라인(Cupertino 스타일)을 기반으로 한 앱에서 사용됩니다.
  • iOS 스타일 UI를 구현할 때 주로 사용합니다.

예제:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

---

3. 화면 구성: Scaffold

Flutter에서 화면의 기본 골격을 제공하는 위젯은 **Scaffold**입니다. 이 위젯은 앱의 기본 레이아웃을 구성하며, 다음과 같은 주요 영역을 포함합니다:

• AppBar: 상단바
• Body: 메인 화면 콘텐츠
• FloatingActionButton: 하단에 떠 있는 버튼
• Drawer: 사이드 네비게이션 메뉴

예제:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Button Pressed');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

---

4. 위젯 트리 (Widget Tree)

Flutter의 UI는 트리 구조로 구성됩니다. 부모 위젯은 자식 위젯을 포함하며, 이러한 트리 구조를 통해 UI를 구성합니다.

예를 들어, 아래의 구조는 텍스트와 버튼을 세로로 배치한 위젯 트리입니다:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('This is a text'),
          ElevatedButton(
            onPressed: () {},
            child: Text('Click me'),
          ),
        ],
      ),
    ),
  );
}

위 트리는 다음과 같은 계층을 구성합니다:

1. Scaffold → 화면 레이아웃
2. Center → 중앙 정렬
3. Column → 수직 배치
4. Text 및 ElevatedButton → 자식 요소

---

5. 상태 관리 (StatelessWidget vs StatefulWidget)

Flutter에서 UI는 두 가지 유형의 위젯으로 나뉩니다:

• StatelessWidget:
  • 상태가 변하지 않는 UI 요소를 나타냅니다.
• StatefulWidget:
  • 상태가 변할 수 있으며, 상태 변화에 따라 UI가 다시 렌더링됩니다.

---

6. Navigator와 Routes (네비게이션과 화면 전환)

Flutter는 여러 화면 간의 전환을 위해 Navigator와 Route를 제공합니다.

• Navigator는 화면 스택 구조를 관리하며, push()와 pop()을 사용해 화면을 추가하거나 제거할 수 있습니다.
• Routes는 앱 내에서 화면 전환을 정의하는 이름 기반 매핑을 제공합니다.

예제:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/second': (context) => SecondPage(),
  },
);

---

7. 테마 (ThemeData)

Flutter에서 전역 테마를 설정하려면 MaterialApp의 theme 속성을 사용합니다. 이를 통해 색상, 글꼴, 스타일을 정의할 수 있습니다.

예제:

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18, color: Colors.black),
    ),
  ),
);

---

8. 플러그인 및 패키지

Flutter는 외부 플러그인 및 패키지를 통해 기능을 확장합니다. pub.dev에서 다양한 패키지를 검색하고, 프로젝트에 통합할 수 있습니다. 예를 들어, HTTP 요청, 데이터베이스 연결, Firebase 연동 등을 위한 패키지가 많이 사용됩니다.

---

9. 핵심 구성 요약

Flutter 애플리케이션의 구성은 다음과 같은 계층 구조로 요약됩니다:

1. main() → 앱 실행의 시작점.
2. MaterialApp 또는 CupertinoApp → 앱의 전체 설정 및 테마 관리.
3. Scaffold → 화면 레이아웃 구성.
4. 위젯 트리 → UI를 구성하는 기본 요소.
5. 상태 관리 → StatelessWidget과 StatefulWidget.
6. 네비게이션 → 화면 전환 관리.
7. 테마와 플러그인 → 앱의 스타일과 기능 확장.

---

이 기본 구조를 바탕으로 Flutter는 크로스 플랫폼에서 효율적이고 직관적인 UI를 구축할 수 있습니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---