서론
계산기 앱은 가장 간단해 보이지만, 대부분의 사람들의 스마트폰에 설치되어 있는 필수적인 앱입니다. 가장 기본적인 기능만을 사용해서 만들 수 있는 앱이기 때문에 Dart 프로그래밍 연습을 할 때에 많은 도움이 되는 프로젝트입니다. 이번엔 계단기 앱을 만드는 법을 한단계씩 차근차근 설명드리겠습니다.
작업 순서
import 'package:flutter/material.dart';
import 'package:math_expressions/math_expressions.dart';
- 라인 1-2: 앱에 필요한 패키지를 가져 옵니다. flutter/material.dart는 Flutter에서 사용자 인터페이스를 만들 수 있는 위젯 및 클래스를 포함하는 패키지입니다. math_expressions.dart는 수학 식을 평가하는 방법을 제공하는 패키지입니다.
void main() => runApp(Calculator());
- 라인 4: 앱을 실행하는 주요 기능입니다. 여기서는 runApp 함수를 호출하여 계산기 위젯의 인스턴스를 전달하여 앱을 시작합니다.
class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}
- 라인 6-10: StatefulWidget 클래스를 확장하고 _CalculatorState 클래스의 인스턴스를 반환하는 Calculator 클래스 정의합니다. 이 위젯은 상태 저장이므로 시간이 지남에 따라 변경될 수 있으며 속성을 관리하는 상태 개체가 있습니다.
class _CalculatorState extends State {
String _output = "0";
String _history = "";
- 라인 12-19: State 클래스를 확장하고 앱의 상태를 관리하는 _CalculatorState 클래스 정의. 현재 출력과 계산 기록을 각각 저장하는 두 개의 인스턴스 변수 _output 및 _history가 있습니다.
@override
void initState() {
_output = "0";
_history = "";
super.initState();
}
- 라인 21-25: 상태 저장 위젯이 트리에 삽입될 때 initState 메서드가 호출됩니다. 여기서는 _output 및 _history 변수를 기본값으로 초기화합니다.
- 라인 28-49: buttonPressed 메서드는 버튼을 누르면 호출됩니다. 버튼이 필요하다텍스트 인수는 버튼에 표시되는 텍스트이며, 그에 따라 앱의 상태를 업데이트합니다. 버튼이텍스트는 "C"이고 _output 및 _history 변수는 기본값으로 재설정됩니다. 버튼이텍스트는 "⌫"이며 _output 변수의 마지막 문자가 제거됩니다. 버튼이텍스트는 "="이고 _history 및 _output 변수는 단일 표현식으로 결합되며, 이는 math_recommunications 패키지를 사용하여 평가됩니다. 결과는 _output 변수에 저장되고 _history 변수는 재설정됩니다. 버튼이텍스트는 _output 변수에 추가되는 다른 문자입니다.
- 라인 51-115: 빌드 메서드는 앱의 사용자 인터페이스를 빌드하기 위해 호출됩니다. 여기서는 Scaped 위젯을 사용하여 기본 재료 설계 레이아웃을 만듭니다. 열 위젯은 기록 및 출력 디스플레이, 버튼 그리드 등 계산기의 다양한 구성 요소를 쌓는 데 사용됩니다. 확장 위젯은 단추 그리드가 가능한 한 많은 공간을 차지하도록 하는 데 사용됩니다. 행 및 확장 위젯은 각 단추가 플랫 단추 위젯의 인스턴스로 표시되는 단추 행을 작성하는 데 사용됩니다. buttonPressed 메서드는 각 버튼에 콜백으로 전달되어 버튼을 누르면 호출됩니다. _output 및 _history 변수는 텍스트 위젯의 인스턴스를 사용하여 표시됩니다.
댓글