[flutter] RaisedButton을 이용한 계산기 앱 만들기

07 Dec 2023

flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 한 번의 코드 작성으로 iOS 및 Android 앱을 개발할 수 있는 크로스 플랫폼 프레임워크입니다. 이번에는 Flutter의 widget 중 하나인 RaisedButton을 이용하여 간단한 계산기 앱을 만들어보겠습니다.

목표

이번 예시에서는 RaisedButton을 이용하여 사용자로부터 숫자를 입력받고, 입력한 숫자를 더하는 계산기 앱을 만들어보겠습니다.

필요한 패키지 추가

먼저, 계산기 앱에서 RaisedButton을 사용하기 위해 material 패키지를 추가해야합니다. pubspec.yaml 파일에 다음과 같이 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  material: ^1.0.4

코드 작성

다음으로, Flutter 앱 코드를 작성해보겠습니다. main.dart 파일을 열어 다음과 같이 코드를 작성해주세요.

import 'package:flutter/material.dart';

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

class CalculatorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calculator App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CalculatorScreen(),
    );
  }
}

class CalculatorScreen extends StatefulWidget {
  @override
  _CalculatorScreenState createState() => _CalculatorScreenState();
}

class _CalculatorScreenState extends State<CalculatorScreen> {
  int sum = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('계산기 앱'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '숫자를 더하세요',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Text(
              '$sum',
              style: TextStyle(fontSize: 50),
            ),
            SizedBox(height: 20),
            RaisedButton(
              onPressed: () {
                setState(() {
                  sum += 1;
                });
              },
              child: Text('1 더하기'),
            ),
          ],
        ),
      ),
    );
  }
}

코드 분석

위의 코드는 크게 3부분으로 나뉩니다.

CalculatorApp: Flutter 앱의 진입점으로, MaterialApp을 초기화합니다.
CalculatorScreen: 앱의 화면을 구성하는 Widget입니다. 현재 숫자를 표시하고, RaisedButton을 통해 숫자를 1씩 더할 수 있습니다.
main: CalculatorApp을 실행시키는 역할을 합니다.

실행 및 확인

코드를 작성하고 실행해봅시다. Flutter SDK가 설치되어 있다면 터미널에서 다음 명령어를 입력해보세요.

flutter run

계산기 앱이 시뮬레이터나 연결된 디바이스에서 실행되고, 화면에 표시될 것입니다. “+” 버튼을 클릭하여 숫자를 더해보세요. 화면에 현재 합계가 표시될 것입니다.

결론

이번 포스트에서는 Flutter의 RaisedButton을 이용하여 간단한 계산기 앱을 만들어보았습니다. RaisedButton 외에도 Flutter에는 다양한 미리 제공된 위젯들이 있으므로, 깊이 있는 UI를 구현할 수 있습니다. 더욱 풍부한 Flutter 앱을 만들기 위해 공식문서 등 참고 자료를 확인해보세요!

참고 자료: