앱 개발 - flutter (2) 기본 코드 해석

이전에 개발환경 구축하면서 기본 flutter 프로젝트를 만들면 나오는 앱의 코드를 분석해보면서 flutter의 기본적인 

코드 구성을 살펴볼 것이다.

import 'package:flutter/material.dart';

먼저 맨 위의 이건 그냥 flutter를 import하는거라 어떤 flutter 프로젝트를 만들던 가장 먼저 써야 하는 코드이다.

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

그 다음에 이건 flutter 앱을 실행시키는 시작 코드이다.

MyApp은 위젯 클래스이다.

위젯에 대해 간단히 설명하자면, 그냥 화면을 구성하는 모든 것이다.

버튼, 텍스트 등의 ui, ui의 padding, 이미지 파일 등 그냥 화면의 전부라고 생각하면 될 것 같다. 

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

  // This widget is the root of your application.
  @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'),
    );
  }
}

MyApp 클래스의 코드이다.

StatelessWidget을 상속받고 있는데, Stateless 위젯은 정적인 위젯을 뜻한다. 

이미지나 텍스트와 같이 사용자와의 상호작용 없이 변하지 않는 위젯이다.

이와 반대로 버튼이나 사용자 입력 등을 처리하는 위젯은 Stateful 위젯이다.

 

Widget build는 위젯 트리를 반환하는 메서드이다.

MaterialApp에서 구성요소를 정의하고 위젯 트리를 커스텀한다.

여기서 MyHomePage라는 새로운 위젯 클래스를 home으로 설정한다.

 

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

  final String title;

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

MyHomePage 클래스의 코드이다.

이 클래스는 Stateful 위젯이다.

생성자 코드를 보면 super.key 말고도 required this.title이 있는데 이는 생성자를 호출할 때 title값을 매개변수로 넣어줄 것을 나타낸다. required는 이 매개변수가 필수로 있어야 한다는 의미이다.

 

createState는 위젯의 상태를 관리하는 메서드이며, Stateful 위젯에서는 꼭 구현해야 하는 메서드이다.

여기서는 위젯의 상태를 _MyHmoePageState 클래스로 반환한다.

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),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

코드의 마지막 부분인  _MyHmoePageState 클래스 코드이다.

MyHomePage 위젯의 상태를 관리하는 클래스이기 때문에 State<MyHomePage>를 상속받는다.

increment 함수 안에 setState는 flutter에 상태가 변화했음을 알리는 메서드이다.

Widget build 안에 Scaffold는 기본적인 화면 구조를 제공하는 위젯이다.

Appbar나 body 부분은 그냥 ui설정 부분이고 floatingActionButton이 버튼이다.

onPressed를 increment 함수로 설정해서 누를 때마다 함수가 실행되게 했다.

 

기본적인 flutter 코드를 이해해봤고 다음에는 flutter에서 서버를 이용해 정보를 저장, 관리하는 방법을 알아볼 것이다.