[Flutter] #3 계산기를 만들자
들어가는 글: 오늘은 간단 계산기를 만들어보도록 하겠습니다. 로직은 없이 UI만 만듭니다.
1. 계산기?
#2 에서는 Hello Flutter를 출력해봤으니,
#3 에서는 간단한 버튼 UI를 가진 계산기를 만들어보도록 하겠습니다.
계산기의 UI는 어떻게 생겼을까요?
다음은 윈도우10에 있는 기본 계산기입니다.
보시면 버튼이 있고 결과가 표시됩니다.
2. 플러터로 단순한 UI를 만들어보자
위의 것을 적당히 본을 떠서, 손쉽게 만들어 본 UI 입니다.
비슷한가요? ^^;; 전혀 그렇지 않네요.
정말 단순한 계산기 UI물론 여기를 가보시면 훨씬 근사한(?) 계산기 예제도 있습니다.
* https://github.com/simonesestito/flutter-calculator
하지만 오늘은 플러터로 버튼 UI를 만드는 법을 알아보겠습니다.
소스코드: https://github.com/yudong80/flutter-dev/blob/master/calculator/lib/calc_v1.dart
플러터의 좋은 점은 코드를 봤을 때 의미 파악이 잘 된다는 점입니다.
오늘은 이 코드를 설명드릴께요
1) import 문
import 'package:flutter/material.dart';
지난번에 설명드렸듯이 material.dart는 안드로이드의 머터리얼 디자인 UI를 구현하기 위해 사용합니다.
안드로이드 앱 개발할 때는 기본으로 넣어주신다고 생각하시면 됩니다.
2) main() 과 runApp() 메서드
void main() => runApp(MyApp());
MyApp() 위젯으로 앱을 실행합니다.
3) StatelessWidget
class MyApp extends StatelessWidget {
calc_v1.dart(이하 V1) 에서는 외관만 작성하므로 StatelessWidget이면 충분합니다. 그런데 무상태 위젯이기 때문에 한계점도 있습니다. 무엇일까요?
4) addNumbers() 메서드
void addNumbers(String key) {
print('calc key >>' + key);
}
무상태 위젯이기 때문에 화면에 무언가 표시를 할 수 없습니다. 그래서 현재 할 수 있는 것은 로그를 출력하는 print() 문 뿐입니다. V1을 실행시켜보시면 버튼을 클릭해도 변경되는 것이 없습니다. 왜냐하면 StatelessWidget이기 때문입니다. 사용자 이벤트를 받아서 화면을 갱신하려면 StatefulWidget을 사용해야 합니다.
5) 화면 표시
위의 소스 코드를 보시면서 주욱 따라오세요.
MyApp 클래스는 무상태 위젯으로, MaterialApp 클래스입니다.
- 제목은 'Calculator'이고
- 화면 구성은 Scaffold() 이고
- 타이틀바는 'Simple Calculator' 입니다.
본체는
a) Column 위젯을 사용하여 위젯을 종방향(vertical)으로 배치합니다.
body: Column(children: [
b) Row 위젯을 사용하여 한줄씩 표시합니다.
Row(children: [
c) 각 줄에는 RaisedButton 위젯을 붙이고, 각 버튼에는 숫자가 있습니다.
onPressed() 이벤트가 발생하면 addNumber() 메서드를 호출합니다.
RaisedButton(child: Text('7'), onPressed: () { addNumbers('7'); },),
이해가 되시나요?
결론
플러터를 배우면서 느낀 점은 화면 구성을 하는게 참 쉽다.. 라는 것이었습니다.
일단 무언가 필요한게 있으면 (크게 사전 지식이 없어도)
flutter button example
flutter calculator example
등으로 검색하면 쉽게 찾을 수 있었습니다.
물론 버튼에도 FlatButton, RaisedButton 등이 있고, 오늘 설명하지 않은 Text 위젯등이 있지만 제가 느낀점은 각각을 다 공부해서 화면을 만들기보다
먼저 되어 있는 예제를 보고 거기에서 내가 원하는 것을 만들어가는 것이 더 빠르다
라는 것이었습니다.
아래 예제를 보시고, 한번 실행해보세요
깃헙: https://github.com/yudong80/flutter-dev/tree/master/calculator
파일: https://github.com/yudong80/flutter-dev/blob/master/calculator/lib/calc_v1.dart
다음은 여기에 로직을 붙이고 이벤트 처리를 해보도록 하겠습니다.
감사합니다.
2019.5.14
