플러터 공부(2) -계산기 코드 분석하기 (1) — 상속, 오버라이드

원래는 1차시에서 말한대로 다트의 문법을 공부하려고 했지만 학습방향이 바뀌어서 수정하게 되었다. 학교에서 플러터 스터디를 진행하던 중, 함께 스터디를 하시는 선배님께서 무언가를 만들어야 습득이 빨리 된다고 하셨다. 처음에는 계산기 코드를 직접 짜라고 하셨는데 너무 어려워서 실패했다.

그래서 대안으로 계산기 코드를 중간에 오류를 하나 섞어 놨으니 한 줄씩 분석하며 공부하라고 짜주셨다. 분석한 과정을 블로그에 올리면 처음 공부하시는 분들께 도움이 많이 될 것 같아서 가지고 와봤다. 거기에 추가로 주신 과제들도 함께 풀어보자

---

 

과제 목록

1. 계산기 코드 한 줄 한 줄 분석하기
2. 계산기 코드에서 오류 찾아내고 가능하면 고치기
3. state가 무엇인지 알아내기
4. 생성자가 무엇인지 알아내기

 

1. 계산기 코드 한 줄 한 줄 한 줄 분석하기

import 'dart:io'; 
import 'package:flutter/material.dart';

//-------------------------------------------------------------------------
var displayNumber = '0';
var makeNumber = '';
var selectedOperator = '−';
var displayFontSize = 80.0;
var pointExist = false;

var firstNumber = 0.0;
var secondNumber = 0.0;

var _disignPage = new DesignPage();

 

1~2 줄 : 다트를 이용해서 코딩을 하려면 우선 다트의 함수가 있어야 하기 때문에 표준 라이브러리를 임포트 한다.

 

— 여기서 나오는 라이브러리란, 코딩을 할 때 사용하는 기본 문법과 함수들이 저장되어 있는 것으로, 다트의 기본 문법을 컴퓨터가 알아듣기 위해서 필요하다.

 

3~8 줄 : var를 통해서 필요한 변수를 선언한다. 변수들을 몇 개 살펴보면 화면에 나타나는 수, 사용하는 연산 기호, 8번째 줄은 디자인을 정하는 함수를 불러온다.

 

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

//-------------------------------------------------------------------------
class CalculatorApp extends StatelessWidget {
  const CalculatorApp({super.key});

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

 

1~2줄 : 애플리케이션의 진입점으로 앱을 실행할 때 이 함수를 호출하면 된다.

 

— 좀 더 자세히 설명하자면 이름을 부르면 오는 것처럼 이 함수를 사용하려면 이때 지정한 이름 runApp을 불러오면 되는 것이다.

 

3~4줄 : 앱의 루트 위젯인 CalculatorApp 클래스를 정의한다. 이는 StatelessWidget을 상속받는다. CalculatorApp 클래스의 생성자를 정의하고, 상위 클래스의 key 속성을 사용하도록 설정한다.

 

— 여기서 상속받는다는 것은 상속을 받는 클래스가 StatelessWidget의 특성을 모두 이어받는다는 뜻이다. 이렇게 상속을 하는 이유는 build() 메서드를 오버라이드하여 앱의 UI를 구성하기 위해서이다.

 

! 오버라이드 : 상위 클래스에서 정의한 함수를 하위 클래스에서 이용하는 것인데, 위에서는 StatelessWidget 클래스에서 정의된 함수 build()를 가져와서 수정하는 것으로 볼 수 있다.

 

5~17줄 : 오버라이드를 이용하여 build() 함수를 데려온 후 앱의 UI를 만든다. 이를 통해서 MaterialApp()을 반환한다. 이 함수 안에는 앱의 이름과 테마(색), 홈 페이지 등을 지정하여 UI를 만드는 것이다.

 

— 여기서 상속받은 StatelessWidget은 build()를 첫 초기화에만 가져오므로 그 후에 메서드를 수정해도 위 클래스에는 반영되지 않는다.

---

 

이번 시간에는 상속과 오버라이드의 기본 개념에 대해 알아보았다.

상속은 자식 클래스로 부모 클래스의 모든 메서드와 변수를 가져올 수 있게 하는 것이고, 오버라이드는 상속받은 자식 클래스에서 부모 클래스에서 정의한 함수를 가져와 다시 정의하여 사용하는 것이다.

다음 시간에는 StatefulWidget에 대해서 배워볼 것인데, 이번 시간에 나온 StatelessWidget과 비교해 보면 좀 더 이해도 잘 되고 재미있을 듯하다.