Flutter 기본 앱(카운터) 분석

이 글은 Dart 기본 문법을 이해하고 Flutter를 시작하는 사람들에게 추천하는 글입니다.

카운터 앱 분석

import 'package:flutter/material.dart';  

• 구글의 material 디자인 시스템 기본 위젯 제공

---

main Method

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

• main함수가 진입점
• runApp이라는 메서드로 최상위 위젯을 감싼다.

---

MyApp class

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

  //앱의 뿌리는 위젯이다.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //material 디자인
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

• MyApp은 StatelessWidget을 상속받고 있다.

  • StatelessWidget: 정적이고 스스로 화면 업데이트가 불가능하다

• 모든 위젯은 build메서드를 반드시 가져야 하고 build메서드는 또 다른 위젯을 return한다.

• super.key: super는 상위 클래스를 뜻하고, key는 위젯트리에서 상태를 보존하고 싶을 때 사용한다.

@override  

• 상속받은 클래스의 메소드를 재정의한다.

---

Widget build(BuildContext context)

• BuildContext context: 위젯트리에서 위젯의 주소를 저장한다.
  • context라는 BuildContext를 build메서드에 만든다.

---

return MaterialApp(
      //material 디자인
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  

• Google의 MaterialApp(Android) style 사용
• Flutter Demo는 앱의 전반적인 제목
• theme: ThemeData안에 정보들은 현재 Buildcontext노드 안에 저장된다.
  • 저장된 정보들은 자식 위젯들에게 전달된다.
  • 이 코드에서는 deeppurple이 전달된다
• useMaterial3: true, 는 Material Design 3.0 스타일 사용 가능(기본은 false)
• final String title;에서 선언을 해주고 MyHomePage(title: 'Flutter Demo Home Page'),에서 초기화를 해준다

---

statefulwidget

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

• final String title;에서 선언을 해주고 MyHomePage(title: 'Flutter Demo Home Page'),에서 초기화를 해준다

@override
  State<MyHomePage> createState() => _MyHomePageState(); // _'MyHomePageState' 부분의 이름은 개발자가 정하는 것이다

• 변경 가능한 상태를 만든다, 여러 번 사용 가능한 state(_MyHomePageState())를 만든다

class _MyHomePageState extends State<MyHomePage> { //위젯의 상태 관리
  int _counter = 0;

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

• counter를 0으로 초기화 허고 _incrementCounter함수가 호출될 때마다 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),
      ), 
    );
  }

• Scaffold: 디자인적인 뼈대룰 구성하는 위젯
• appBar: 앱 최상단을 구성하는 위젯
  • backgroundcolor는 위에서 설정해놓은 color의 inversePrimary(반대된 색상)으로 설정한다
  • title은 AppBar의 들어갈 text를 작성
• body: appBar 아래부터 body이다.
• Center: 위젯을 가운데 배치한다.
• child: 위젯 안 위젯을 넣고 싶을 때 child 사용(2개 이상이면 children)
  • Cneter는 1개 위젯만 가질 수 있다.
  • Collumn은 2개이상 가질 수 있다.
• Column: 위젯을 세로로 배치한다. (Row는 가로)
• mainAxisAlignment: MainAxisAlignment.center: alignment는 정렬할 방향을 지정한다.
  • main은 정방향, cross는 반대 방향이다.

children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],

• 은 여러 위젯을 사용할 때 사용한다.(여기서는 Text위젯 2개)
• $: 문자열로 변환해 출력한다.

 floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 

• 버튼의 기본 위치가 오른쪽 아래인 이유는 Scaffold로 구조를 잡아주는 위젯의 floatingActionButton이 들어있기 때문이다.
• 버튼을 클릭하면 _incrementCounter함수가 호출된다.
• tooltip: 이 버튼이 어떤 버튼인지 설명해준다
• Icon을 사용해 버튼의 이미지를 생성한다