[flutter] 플러터 Stepper를 사용하여 페이지 네비게이션 기능이 있는 탐험 게임 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 튜토리얼에서는 Flutter의 Stepper 위젯을 사용하여 페이지 네비게이션 기능이 있는 탐험 게임 애플리케이션을 만들어보겠습니다. Stepper는 단계별로 사용자 인터페이스를 표시하고 해당 단계 간의 이동을 관리하는 데 사용되는 유용한 위젯입니다.

Stepper 위젯

Stepper는 일련의 단계를 나타내는 위젯입니다. 각 단계는 제목과 내용을 가지고 있으며, 사용자는 각 단계를 순서대로 완료하게 됩니다. Stepper는 수평 또는 수직으로 레이아웃을 구성할 수 있습니다.

프로젝트 구조

먼저 새로운 Flutter 프로젝트를 생성합니다.

flutter create exploration_game

그런 다음 프로젝트의 구조를 다음과 같이 업데이트합니다.

lib/
  main.dart
  steps/
    intro_step.dart
    explore_step.dart
    result_step.dart

lib 폴더 내에 steps 폴더를 생성하고, 이곳에 각각의 단계를 위한 위젯 파일을 만듭니다.

IntroStep 위젯

intro_step.dart 파일을 열고 다음 코드를 작성합니다.

import 'package:flutter/material.dart';

class IntroStep extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Introduction'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Welcome to the Exploration Game!',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            RaisedButton(
              child: Text('Start Exploration'),
              onPressed: () {
                // TODO: Move to the next step
              },
            ),
          ],
        ),
      ),
    );
  }
}

이 위젯은 앱의 도입부를 나타내며, 사용자를 환영하고 게임을 시작할 기회를 제공합니다. 버튼을 누르면 다음 단계로 이동하게 됩니다.

ExploreStep 위젯

explore_step.dart 파일을 열고 다음 코드를 작성합니다.

import 'package:flutter/material.dart';

class ExploreStep extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Explore'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Explore the Unknown!',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            RaisedButton(
              child: Text('Continue'),
              onPressed: () {
                // TODO: Move to the next step
              },
            ),
            OutlineButton(
              child: Text('Go Back'),
              onPressed: () {
                // TODO: Move to the previous step
              },
            ),
          ],
        ),
      ),
    );
  }
}

ExploreStep 위젯은 사용자가 탐험을 진행하는 단계를 나타냅니다. 탐험을 계속하거나 이전 단계로 돌아갈 수 있는 버튼이 있습니다.

ResultStep 위젯

result_step.dart 파일을 열고 다음 코드를 작성합니다.

import 'package:flutter/material.dart';

class ResultStep extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Result'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Congratulations! You have completed the Exploration Game!',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            RaisedButton(
              child: Text('Play Again'),
              onPressed: () {
                // TODO: Move to the first step
              },
            ),
          ],
        ),
      ),
    );
  }
}

ResultStep 위젯은 게임을 완료한 후 결과를 보여줍니다. 사용자는 다시 게임을 시작할 수 있습니다.

애플리케이션 흐름 관리

main.dart 파일을 열고 다음 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:exploration_game/steps/intro_step.dart';
import 'package:exploration_game/steps/explore_step.dart';
import 'package:exploration_game/steps/result_step.dart';

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

class ExplorationGameApp extends StatefulWidget {
  @override
  _ExplorationGameAppState createState() => _ExplorationGameAppState();
}

class _ExplorationGameAppState extends State<ExplorationGameApp> {
  int _currentStep = 0;
  List<Step> _steps = [
    Step(title: 'Introduction', content: IntroStep()),
    Step(title: 'Explore', content: ExploreStep()),
    Step(title: 'Result', content: ResultStep()),
  ];

  void _nextStep() {
    setState(() {
      _currentStep++;
    });
  }

  void _prevStep() {
    setState(() {
      _currentStep--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Exploration Game',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_steps[_currentStep].title),
        ),
        body: _steps[_currentStep].content,
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentStep,
          onTap: (index) {
            setState(() {
              _currentStep = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Introduction',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.explore),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.check),
              label: 'Result',
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.navigate_next),
          onPressed: _nextStep,
        ),
      ),
    );
  }
}

ExplorationGameApp 위젯은 Stepper 위젯을 사용하여 각 단계를 표시하고 단계 간의 이동을 관리합니다. 또한 BottomNavigationBar를 통해 사용자가 단계를 직접 선택할 수 있으며, FloatingActionButton을 통해 다음 단계로 이동할 수 있습니다.

이제 애플리케이션을 실행해보세요. 탐험 게임 애플리케이션이 시작되고, 사용자가 각 단계를 완료하며 페이지를 이동할 수 있게 됩니다.

결론

이번 튜토리얼에서는 Flutter의 Stepper를 사용하여 페이지 네비게이션 기능이 있는 탐험 게임 애플리케이션을 만들어보았습니다. Stepper는 단계별로 사용자 인터페이스를 표시하고 해당 단계 간의 이동을 관리하는데 유용한 위젯이었습니다. 이러한 기능을 사용하여 다양한 애플리케이션을 개발할 수 있으니, 많은 활용해보시기 바랍니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참조하세요.