[Flutter] 내기에서 지지 않는 APP - 내기 기능 만들기 (2)

[Flutter] 내기에서 지지 않는 APP - 메인화면 및 설정 창 만들기(1)

메인화면과 설정창을 만들었었고 이번에는 내기를 할때 여러 터치가 생기고 3초 뒤에 터치 중에 랜덤으로 하나 선택되는 내기에서 지지 않는 앱의 핵심 기능을 만들어 보겠습니다.

---

1. 파일트리 구조 변경

먼저 main.py에서 모든 코드를 넣어두었던 것을 유지보수를 위해서 파일을 분리시켰습니다.

lib/
├── main.dart # 앱의 진입점
├── screens/
        └── home_screen.dart # 메인 화면 구현
├── models/
        └── ripple_effect_model.dart # 리플 효과 데이터 모델
├── widgets/
        ├── ripple_effect.dart # 리플 효과 위젯
        └── settings_bottom_sheet.dart # 설정 바텀시트 위젯
├── utils/
        └── game_controller.dart # 게임 로직 컨트롤러
└── painters/
        └── circle_painter.dart # 원형 리플 그리기 로직

 

2. 컴포넌트 설명

 2.1 ripple_effect_model.dart

🧑‍💻 리플 효과의 상태 관리
- 위치 관리 (ValueNotifier 사용)
- 애니메이션 상태 관리
- 색상 및 활성화 상태 관리

class RippleEffect {
  // 상태 변수들
  ValueNotifier<Offset> position;     // 위치
  final AnimationController controller;// 애니메이션 컨트롤러
  final Animation<double> animation;   // 애니메이션
  Color color;                        // 색상

  // 상태 업데이트 메서드
  void updatePosition(Offset newPosition) { /* 위치 업데이트 */ }
  void updateColor(Color newColor) { /* 색상 업데이트 */ }
}

 

 

 2.2 ripple_effect.dart

🧑‍💻리플 효과의 시각적 표현을 담당
- ValueListenableBuilder로 위치 변화 감지
- AnimatedBuilder로 애니메이션 처리
- CustomPaint와 CirclePainter로 실제 원형 그리기

class RippleEffectWidget extends StatelessWidget {
  // 필수 속성
  final RippleEffect ripple;      // 리플 모델
  final double rippleSize;        // 리플 크기

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<Offset>(
      valueListenable: ripple.position,
      builder: (context, position, child) {
        return AnimatedBuilder(
          animation: ripple.animation,
          builder: (context, child) {
            return CustomPaint(
              painter: CirclePainter(...),  // 원형 그리기
            );
          },
        );
      },
    );
  }
}

 

 2.3 game_controller.dart

🧑‍💻게임의 전체 로직을 관리하는 컨트롤러
- 리플 생성/관리
- 터치 이벤트 처리
- 랜덤 선택 타이머 관리

class GameController {
  // 필수 변수들
  final Map<int, RippleEffect> activeRipples = {};  // 활성화된 리플들
  final double rippleSize = 150.0;                  // 리플 크기
  final int maxRipples = 5;                         // 최대 리플 수
  Timer? selectionTimer;                            // 선택 타이머
  bool isSelectionComplete = false;                 // 선택 완료 여부

  // 핵심 메서드들
  void startSelectionTimer() { /* 3초 후 랜덤 선택 */ }
  void selectRandomRipple() { /* 랜덤 리플 선택 */ }
  void resetGame() { /* 게임 초기화 */ }
  void handlePointerDown() { /* 터치 시작 처리 */ }
  void handlePointerMove() { /* 터치 이동 처리 */ }
  void handlePointerUp() { /* 터치 종료 처리 */ }
}

 

 2.4 circle_painter.dart

🧑‍💻커스텀 원형 리플 그리기
- 원형 애니메이션 처리
- 리플 스타일 정의

class CirclePainter extends CustomPainter {
  // 필수 변수들
  final Offset center;    // 중심점
  final double progress;  // 진행도
  final double rippleSize;// 크기
  final Color color;     // 색상

  @override
  void paint(Canvas canvas, Size size) {
    // 원형 리플 그리기 로직
  }
}

 

 

3. 실행화면

터치가 되는 개수대로 화면에 원 애니매이션이 나옵니다. (최대 5개)
마지막 터치 이후 3초가 지나면 랜덤으로 하나를 선택해서 검정색으로 바뀐뒤 게임이 종료됩니다.
이때 터치는 떼지만 않으면 화면을 자유롭게 이동이 가능합니다.

---

슬슬 이제 마무리 단계로 접어가고 있습니다.

전체 코드는 프젝 마무리 포스팅때 올려드리도록 하겠습니다.