[Flutter] Flutter Project 기본 구조

드디어 첫 Flutter 프로젝트를 만들어보려고 한다. 기본적인 인텔리제이 셋팅은 플러그인을 설치하고, 사용할 SDK 를 셋팅하는 것이 전부라 일단은 넘어가도록 하고 이번 포스팅에서는 Flutter 프로젝트를 만들면 자동으로 생성되는 기본 구조를 좀 살펴보면서 각 파일과 코드가 어떤 역할을 하는 지 확인하려고 한다.

 

바로 시작해보자.

---

우선, Flutter 프로젝트를 생성하면 확실히 네이티브 환경보다는 더 복잡한 디렉토리 구조가 눈에 띈다.

Android와 iOS를 모두 지원하는 어플을 생성하기 때문에 android, ios 라는 이름의 디렉토리를 가지고 있다. 이 두 디렉토리는 main.dart에서 작성된 코드를 컴파일하면서 자동으로 Flutter 가 구성해주는 곳이기 때문에 깊게 살펴볼 필요는 없다.

 

---

- pubspec.yaml

 

root 디렉토리를 보면 아래쪽에 pubspec 라는 yaml 파일을 확인할 수 있다. 이 pubspec.yaml는 Flutter 프로젝트의 모든 메타 정보(이름, 설명, 버전 등) 를 담고 있는 마크업 파일이다. 

 

해당 파일에서 import할 외부 라이브러리나 이미지 파일, 폰트 등을 모두 선언하여 사용할 수 있다. 

 

pubspec.yaml 파일은 수정 후에 gradle과 비슷하게 Pub get 이라는 명령어를 통해 빌드해줘야 Flutter프로젝트에서 업데이트된 내용을 적용한다. 

 

---

- main.dart

 

이제 Flutter 프로젝트의 본체라고 할 수 있는 main.dart 를 살펴보자. 사실 생성되고 아무런 코드를 작성하지 않은 기본 그대로의 main.dart 는 가지고 있는 내용이 그리 많지는 않다. 

위와 같이 기본적으로 생성된 코드는 크게 5개의 부분으로 나뉜다.

 

우선 맨 위에 코드는 내부 패키지 파일을 불러오기 위한 import문이며, 그 아래있는 main() 함수는 JAVA나 C와 마찬가지로 프로젝트의 진입점이 되는 함수이다. 

 

main() 함수는 MyApp이라는 Stateless 위젯을 실행하는 것 외에는 하는 일이 없다. 

 

위젯은 Flutter에서 UI의 컴포넌트나 화면을 구성하는 단위이다. 아마도 Flutter의 기본이 되고, 또 가장 중요한 개념인 거 같다.

 

위젯은 크게 상태 값이 보존되는 위젯과 상태 값이 보존되지 않는 위젯으로 나뉜다. 위 코드에서 볼 수 있듯 Stateless와 Stateful이 그 예시인 것 같으나 자세한 내용은 위젯을 다루면서 다시 보도록 하자.

 

◎ MyApp

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MyApp 클래스는 어플리케이션의 윤곽을 나타내기 위한 위젯을 리턴하는 코드가 전부이다. home 부분에서 MyHomePage 클래스의 생성자를 불러와  Flutter Demo Home Page 라는 타이틀을 가지는 StatefulWidget을 생성해준다.

 

◎ MyHomePage

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

MyHomePage 위젯도 코드가 그렇게 길지 않다. 클래스의 인스턴스가 만들어질 때 매개변수로 타이틀을 받아서 멤버 변수에 저장하고, _MyHomePageState 클래스 형식으로 createState() 함수를 호출하여 위젯의 상태를 저장할 객체를 생성한다.

 

◎ _MyHomePageState

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

마지막으로 _MyHomePageState 클래스이다. 맴버 변수로  _counter를 가지고 있으며, 내부 버튼을 눌렀을 때 이 변수를 하나씩 증가시키고 해당 변수를 화면에 보여주는 것이 전부이다. 

 

---

이제 그대로 한번 실행해보면, 아래와 같이 기본적인 Flutter앱을 확인할 수 있다.