Colin's Blog
[flutter] 플러터 커퍼티노 스테퍼를 이용한 숫자 입력 기능 구현하기

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 기능과 UI 위젯을 제공합니다. 이번 글에서는 플러터의 Cupertino 스타일의 스테퍼(stepper)를 이용하여 숫자 입력 기능을 구현하는 방법에 대해 알아보겠습니다.

스테퍼(Stepper)란?

스테퍼는 사용자가 숫자 값을 증가 또는 감소시킬 수 있는 위젯입니다. 보통 숫자를 입력해야 할 때 사용되며, 상향이나 하향 버튼을 클릭하여 값을 조절할 수 있습니다.

프로젝트 설정

먼저, 플러터 프로젝트를 생성하고 의존성을 추가해야 합니다. 아래와 같이 pubspec.yaml 파일을 열고 cupertino_icons 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3

의존성을 추가한 뒤, 패키지를 업데이트하기 위해 터미널에서 아래 명령을 실행해주세요.

flutter pub get

코드 작성

숫자 입력 기능을 구현하기 위해 다음과 같은 단계를 따릅니다.

  1. 필요한 위젯 임포트하기
  2. 변수 생성하기
  3. 스테퍼 위젯 생성하기
  4. UI에 스테퍼 추가하기
  5. 값 변경 이벤트 처리하기

아래는 위 단계를 따라 구현한 예시 코드입니다.

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

class NumberInputScreen extends StatefulWidget {
  @override
  _NumberInputScreenState createState() => _NumberInputScreenState();
}

class _NumberInputScreenState extends State<NumberInputScreen> {
  int _value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text('Number Input'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoButton(
              child: Text('Increase'),
              onPressed: () {
                setState(() {
                  _value++;
                });
              },
            ),
            Text(
              '$_value',
              style: TextStyle(fontSize: 24),
            ),
            CupertinoButton(
              child: Text('Decrease'),
              onPressed: () {
                setState(() {
                  _value--;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 _NumberInputScreenState 클래스에서 int 형태의 _value 변수를 선언하여 현재 숫자 값을 저장합니다.

build 메서드에서는 CupertinoNavigationBar와 Center 위젯을 사용하여 앱 바와 중앙에 위젯을 배치합니다. 중앙에는 Column 위젯을 사용하여 숫자 증가 및 감소 버튼과 숫자 값을 표시하는 Text 위젯을 배치합니다. 버튼을 누를 때마다 _value 변수의 값이 갱신되고 화면에 표시됩니다.

실행하기

위 코드를 실행하려면 main.dart 파일에서 NumberInputScreen을 위젯으로 설정해주세요.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Number Input Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NumberInputScreen(),
    );
  }
}

앱을 실행하고 스테퍼 위젯이 화면에 표시되는지 확인하세요. 숫자를 증가 또는 감소시키는 버튼을 누르면 숫자 값이 변경되는 것을 확인할 수 있습니다.

마무리

플러터의 Cupertino 스타일의 스테퍼를 이용하여 숫자 입력 기능을 구현하는 방법에 대해 살펴보았습니다. 스테퍼를 사용하면 사용자가 숫자 값을 쉽게 조절할 수 있도록 도와줍니다.

더 많은 플러터 위젯과 기능을 알아보려면 플러터 공식 문서를 참고하세요.

참고한 자료

© 2018 Colin. All rights reserved.