5. [Flutter] 플러터의 기본 앱 구조 분석하기

Flutter의 기본구조를 살펴보기 위해 기본 프로젝트인 카운팅 앱 소스를 가지고 설명하겠습니다.

---

void main()

import 'package:flutter/material.dart';

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

import 'package:flutter/material.dart';

- import 로 material 라이브러리를 가져오는 것부터 시작합니다.

 

- void main() Function는 runApp() 함수를 통해 아래 작성된 MyApp Widget을 실행하는 역할을 할 뿐 다른 역할은 하지 않습니다.

---

MyApp

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
   
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyApp extends StatelessWidget {

main() 에서 runApp()으로 호출되었던 MyApp()  클래스는 StatelessWidget이라는 위젯을 상속받습니다.

StatelessWidget은 변경 불가능한 위젯으로, 한번 생성되면 내부 상태를 변경할 수 없습니다. 즉, 한번 그려지면 그대로 유지되며 외부에서 전달된 데이터나 속성을 활용하여 UI를 구성합니다. StatelessWidget은 생성자에서 인자를 받아와서 UI를 그리는 build 메서드를 구현합니다.

const MyApp({super.key})

MyApp 위젯의 생성자로써 파라미터 값을 받으려면 여기에  required 와 함께 받고자 하는 매개변수를 넣어주면 됩니다.

 

@override

Widget build(BuildContext context) {

상속받은 StatelessWidget에 있는 build 함수를 @override로 재정의하여 본격적인 위젯 구성을 return 합니다.

      return MaterialApp(      title: 'Flutter Demo',      theme: TheData(...),      home: const MyHomePage(...),

runApp()으로 처음실행되는 위젯은 반드시 MeterialApp을 return 해야 합니다.

또한, 위젯에는 필수로 지정해야 하는 속성이 있습니다.

MeterialApp에서 home: 속성을 지정해야 하며, home: 에는 실행될 위젯을 넣어줍니다.

여기서는 MyHomePage라는 StatefulWidget을 넣어줬습니다.

 

---

MyHomePage

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

MyHomePage는 StatefulWidget을 상속받습니다.

MyHomePage에서는 인자값을 갖는 변수들, createState 호출정도만 구현하고 대부분의 기능들과 위젯은 _MyHomePageState() 클래스에서 구현합니다.

StatefulWidget은 변경 가능한 위젯으로, 내부 상태를 변경할 수 있습니다. 즉, UI를 그리는 동안 상태가 변경되면 UI가 재구성됩니다. StatefulWidget은 StatefulWidget 클래스를 상속하고 createState 메서드를 구현하여 내부 상태를 가진 State 클래스를 생성하고 반환합니다. State 클래스는 상태가 변경되면 build 메서드를 호출하여 UI를 다시 그리게 됩니다.

required this.title 을 생성자에 추가함으로써 MyHomePage를 호출할 때는 파라미터로 String형 title이 요구됩니다.

이는 위에서 다룬 MyApp()에서 보는 것과 같이 home: const MyHomePage(title: 'Flutter Demo Home Page')로 title에 문자형 값을 입력하고 호출한 것을 볼 수 있습니다.

 

createState 메서드에서는 _MyHomePageState 클래스의 인스턴스를 반환합니다. 이 클래스는 MyHomePage의 내부 상태를 다루며, build 메서드를 구현하여 UI를 구성합니다. createState 메서드를 통해 내부 상태(State)를 생성하고, 이 상태를 활용하여 UI를 그리는 것이 StatefulWidget의 핵심적인 역할입니다.

 

---

_MyHomePageState

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        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.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 StatefulWidget을 상속한 MyHomePage 클래스의 내부 상태(State)를 다루는 _MyHomePageState 클래스의 코드입니다.

 

먼저, State 클래스를 상속받은 클래스에서는 내부적으로 상태를 가지며(build 메서드를 포함한 여러 메서드와 변수) 해당 상태에 대한 변경을 위해서는 setState 메서드를 호출해야 합니다. setState 메서드는 내부적으로 build 메서드를 다시 호출하고 UI를 업데이트합니다.

 

위 코드에서는 _counter 변수를 정의하고, _incrementCounter 메서드를 정의하여 해당 변수를 증가시키고 setState 메서드를 호출합니다. 이를 통해 버튼을 누를 때마다 _counter 변수가 증가하고, UI도 업데이트됩니다.

 

build 메서드에서는 Scaffold 위젯을 반환하며, appBar와 body, floatingActionButton 등 다양한 위젯을 구성합니다. appBar에서는 Theme.of(context).colorScheme.inversePrimary를 이용하여 앱 바의 배경색을 지정하고, title에는 widget.title을 출력합니다. body에서는 Column과 Text 위젯을 이용하여 화면에 텍스트와 숫자 값을 출력합니다. 마지막으로 floatingActionButton에서는 onPressed 콜백 함수로 _incrementCounter 메서드를 등록하고, tooltip과 Icon을 설정합니다.

 

이렇게 StatefulWidget과 함께 사용되는 State 클래스를 이용하여, 앱의 내부 상태를 관리하고 해당 상태에 따라 UI를 업데이트할 수 있습니다.

 

---

[빌드된 모습]