플러터(Flutter)는 다양한 플랫폼에서 동작하는 네이티브 앱을 개발할 수 있는 프레임워크입니다. 이번에는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 스포츠 점수 조절 기능을 구현해보겠습니다.

1. 필요한 패키지 설치하기

우선 플러터 프로젝트에서 cupertino_icons 패키지를 사용할 수 있도록 pubspec.yaml 파일에 아래와 같이 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

해당 패키지를 추가하기 위해 프로젝트 루트 경로에서 flutter packages get 명령을 실행하여 패키지를 설치해주세요.

2. 스테퍼 생성하기

스테퍼는 값을 증가 또는 감소시키는 위젯으로서, 플러터의 커퍼티노 디자인을 따르기 때문에 iOS 스타일로 보여집니다. 스테퍼를 생성하기 위해 다음과 같은 코드를 작성해주세요.

import 'package:flutter/cupertino.dart';

class SportsScoreStepper extends StatefulWidget {
  @override
  _SportsScoreStepperState createState() => _SportsScoreStepperState();
}

class _SportsScoreStepperState extends State<SportsScoreStepper> {
  int _score = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoStepper(
      value: _score,
      onChanged: (value) {
        setState(() {
          _score = value;
        });
      },
    );
  }
}

위 코드에서는 _SportsScoreStepperState 클래스에서 int _score 변수를 생성하여 현재의 점수를 나타내고, CupertinoStepper 위젯을 반환하는 build 메소드를 작성했습니다. value 속성으로 현재의 점수를 지정하고, onChanged 콜백으로 스테퍼 값이 변경되었을 때 상태를 업데이트합니다.

3. 사용하기

위에서 작성한 SportsScoreStepper 위젯을 사용하여 스포츠 점수를 조절하는 기능을 구현하기 위해, 해당 위젯을 어떤 화면에서든 사용할 수 있도록 해주세요.

import 'package:flutter/cupertino.dart';

class SportsScorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('스포츠 점수 조절'),
      ),
      child: Center(
        child: SportsScoreStepper(),
      ),
    );
  }
}

위 코드에서는 SportsScorePage 클래스에서 SportsScoreStepper 위젯을 가운데 정렬하여 중앙에 나타내도록 했습니다.

4. 실행 결과 확인하기

이제 앱을 실행하여 스포츠 점수 조절 기능을 확인해보세요. 스테퍼를 클릭하여 값을 증가 또는 감소시킬 수 있습니다.

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

void main() {
  runApp(
    MaterialApp(
      home: SportsScorePage(),
    ),
  );
}

위 코드는 앱을 실행시키기 위한 main 함수입니다. 이를 앱의 시작점으로 설정하고, SportsScorePage를 home으로 지정하여 실행해보세요.

결론

위의 단계를 따라가면 플러터의 커퍼티노 스테퍼를 이용하여 스포츠 점수 조절 기능을 구현할 수 있습니다. 이를 활용하여 게임이나 스포츠와 관련된 앱을 개발하는 데 도움을 얻을 수 있을 것입니다.