[flutter] 플러터(Flutter)의 기본 구조 이해하기

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱 개발을 위한 강력한 도구입니다. 이 글에서는 플러터의 기본 구조를 이해하는 데 도움이 될 내용을 소개하겠습니다.

1. 앱의 진입점(main)

플러터 앱은 main 함수에서 시작됩니다. main 함수는 앱의 진입점 역할을 하는 함수로, runApp 함수를 호출하여 앱의 루트 위젯을 실행시킵니다.

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

2. 루트 위젯(MyApp)

루트 위젯은 앱의 가장 상위에 위치하는 위젯입니다. MaterialApp 또는 CupertinoApp과 같은 위젯을 이용하여 앱의 기본적인 테마와 설정을 지정할 수 있습니다.

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

3. 홈 페이지(MyHomePage)

홈 페이지는 앱이 실행되었을 때 기본적으로 보여질 화면을 구성하는 위젯입니다. Scaffold 위젯을 이용하여 앱의 기본적인 구조를 설정할 수 있습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

4. 위젯 트리 구조

플러터 앱은 위젯들로 이루어진 트리 구조로 이루어져 있습니다. 위젯은 상태가 변경되면 화면을 다시 그리는 방식으로 동작합니다. 플러터에서는 위젯의 위치와 모양을 수동으로 관리할 수 있기 때문에 유연하게 UI를 구성할 수 있습니다.

5. 위젯의 상태 관리

플러터에서는 상태 관리를 위해 Stateful 위젯을 사용합니다. Stateful 위젯은 변경 가능한 상태(State)를 가지고 있으며, 상태가 변경되면 변경사항을 감지하여 화면을 다시 그립니다. Stateful 위젯은 StatefulWidget과 State로 구성되며, StatelessWidget과 달리 build 메서드 외에도 상태를 변경하는 메서드를 사용할 수 있습니다.

위에서 소개한 내용들은 플러터 앱의 기본 구조를 이해하는 데 도움이 되는 내용들입니다. 플러터에서는 위젯을 조합하여 복잡한 UI를 구성할 수 있으며, 상태 관리를 통해 동적인 행동을 구현할 수 있습니다. 플러터를 잘 이용하면 크로스 플랫폼 앱 개발을 효과적으로 할 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.