[flutter] 플러터 커퍼티노 스테퍼를 이용한 게임 난이도 조절 기능 구현하기

05 Dec 2023

flutter

플러터에서는 iOS의 디자인 가이드라인인 Cupertino 스타일을 흉내내는 위젯을 제공합니다. 그 중 하나인 커퍼티노 스테퍼( Cupertino Stepper)를 이용하여 게임의 난이도를 조절하는 기능을 구현해보겠습니다.

1. 커퍼티노 스테퍼 위젯 추가하기

먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

그리고 다음과 같이 코드에서 CupertinoStepper 위젯을 추가해주세요.

import 'package:flutter/cupertino.dart';

class GameDifficultyWidget extends StatefulWidget {
  @override
  _GameDifficultyWidgetState createState() => _GameDifficultyWidgetState();
}

class _GameDifficultyWidgetState extends State<GameDifficultyWidget> {
  double _difficulty = 0;

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

2. 난이도 조절 기능 추가하기

CupertinoStepper 위젯을 사용하여 게임의 난이도를 조절하는 기능을 추가할 수 있습니다.

import 'package:flutter/cupertino.dart';

class GameDifficultyWidget extends StatefulWidget {
  final Function(double) onDifficultyChanged;

  GameDifficultyWidget({required this.onDifficultyChanged});

  @override
  _GameDifficultyWidgetState createState() => _GameDifficultyWidgetState();
}

class _GameDifficultyWidgetState extends State<GameDifficultyWidget> {
  double _difficulty = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoStepper(
      value: _difficulty,
      onChanged: (double newValue) {
        setState(() {
          _difficulty = newValue;
        });
        widget.onDifficultyChanged(newValue);
      },
    );
  }
}

GameDifficultyWidget 클래스를 위와 같이 수정하면 onDifficultyChanged 콜백 함수를 사용하여 난이도 값을 전달할 수 있습니다.

3. 게임 화면에서 난이도 조절 기능 사용하기

이제 만든 GameDifficultyWidget을 게임 화면에 추가하여 난이도 조절 기능을 사용해보겠습니다.

import 'package:flutter/cupertino.dart';

class GameScreen extends StatefulWidget {
  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  double _gameDifficulty = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Game'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              'Difficulty: $_gameDifficulty',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            GameDifficultyWidget(
              onDifficultyChanged: (double newValue) {
                setState(() {
                  _gameDifficulty = newValue;
                });
              },
            ),
            // 게임 화면 구현
          ],
        ),
      ),
    );
  }
}

위와 같이 GameDifficultyWidget을 추가하고, onDifficultyChanged 콜백 함수에서 _gameDifficulty 값을 업데이트하면 난이도 값이 반영된 화면을 볼 수 있습니다.

결론

플러터에서는 Cupertino 스타일의 위젯을 제공하여 iOS 디자인 가이드에 따라 앱을 개발할 수 있습니다. 이번에는 커퍼티노 스테퍼를 통해 게임의 난이도를 조절하는 기능을 구현해보았습니다. 이를 활용하여 다양한 iOS 스타일의 기능을 구현해보세요!