[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 파티원 수에 맞추어 파티 지원 아이템을 선택하는 게임 도우미 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 프로젝트에서는 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 파티원 수에 따라 파티 지원 아이템을 선택하는 게임 도우미 앱을 만들어보겠습니다.

1. 프로젝트 설정

먼저 Flutter 프로젝트를 만들어야 합니다. Flutter 프로젝트를 만드는 방법은 공식 문서를 참고하시기 바랍니다.

2. Stepper 위젯 추가하기

파티 지원 아이템 선택 앱의 핵심이 되는 Stepper 위젯을 사용하겠습니다. Stepper 위젯은 다양한 단계로 나눠진 사용자 인터페이스를 만들 수 있도록 도와줍니다.

class PartyItemSelectionPage extends StatefulWidget {
  @override
  _PartyItemSelectionPageState createState() => _PartyItemSelectionPageState();
}

class _PartyItemSelectionPageState extends State<PartyItemSelectionPage> {
  int _currentStep = 0;
  List<Step> _steps = [
    Step(
      title: Text('파티원 수 선택'),
      content: // 파티원 수 선택 내용 추가
    ),
    Step(
      title: Text('아이템 선택'),
      content: // 아이템 선택 내용 추가
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Stepper(
      currentStep: _currentStep,
      onStepTapped: (step) {
        setState(() {
          _currentStep = step;
        });
      },
      steps: _steps,
    );
  }
}

위의 코드에서는 _currentStep 변수를 사용하여 현재 선택된 스텝을 추적합니다. onStepTapped 콜백 함수를 사용하여 스텝을 선택할 때마다 _currentStep을 업데이트하도록 합니다. _steps 변수를 사용하여 Stepper의 각 스텝을 설정합니다.

3. 파티원 수 선택

첫 번째 스텝에서는 사용자가 파티원 수를 선택할 수 있도록 합니다. 예를 들어, DropdownButton 위젯을 사용하여 선택할 수 있는 파티원 수 목록을 표시하고, 선택된 파티원 수를 _currentPartySize 변수에 저장합니다.

int _currentPartySize;

Step(
  title: Text('파티원 수 선택'),
  content: DropdownButton<int>(
    value: _currentPartySize,
    items: [1, 2, 3, 4, 5].map((int value) {
      return DropdownMenuItem<int>(
        value: value,
        child: Text(value.toString()),
      );
    }).toList(),
    onChanged: (int newValue) {
      setState(() {
        _currentPartySize = newValue;
      });
    },
  ),
),

위의 코드에서는 _currentPartySize 변수를 사용하여 선택된 파티원 수를 추적합니다. DropdownButton 위젯을 생성하여 선택할 수 있는 파티원 수 목록을 만들고, onChanged 콜백 함수를 사용하여 선택이 변경될 때마다 _currentPartySize를 업데이트합니다.

4. 아이템 선택

두 번째 스텝에서는 사용자가 특정 파티원 수에 맞는 아이템을 선택할 수 있도록 합니다. 예를 들어, RadioButton 위젯을 사용하여 선택 가능한 아이템 목록을 표시하고, 선택된 아이템을 _selectedItem 변수에 저장합니다.

String _selectedItem;

Step(
  title: Text('아이템 선택'),
  content: Column(
    children: [
      RadioListTile<String>(
        title: Text('필요 아이템 1'),
        value: '아이템 1',
        groupValue: _selectedItem,
        onChanged: (String newValue) {
          setState(() {
            _selectedItem = newValue;
          });
        },
      ),
      RadioListTile<String>(
        title: Text('필요 아이템 2'),
        value: '아이템 2',
        groupValue: _selectedItem,
        onChanged: (String newValue) {
          setState(() {
            _selectedItem = newValue;
          });
        },
      ),
    ],
  ),
),

위의 코드에서는 _selectedItem 변수를 사용하여 선택된 아이템을 추적합니다. RadioListTile 위젯을 생성하여 선택 가능한 아이템 목록을 만들고, onChanged 콜백 함수를 사용하여 선택이 변경될 때마다 _selectedItem을 업데이트합니다.

5. 결과 표시

파티원 수와 아이템 선택이 완료되면, 선택된 내용을 사용하여 결과를 표시하는 영역을 추가할 수 있습니다. 예를 들어, 선택된 파티원 수와 아이템을 출력해보겠습니다.

Step(
  title: Text('결과'),
  content: Column(
    children: [
      Text('선택한 파티원 수: $_currentPartySize'),
      Text('선택한 아이템: $_selectedItem'),
    ],
  ),
),

위의 코드에서는 Text 위젯을 사용하여 선택된 파티원 수와 아이템을 표시합니다.

6. 완성된 앱 실행

PartyItemSelectionPage 위젯을 앱의 메인 위젯으로 설정하고, 앱을 실행해보세요.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('파티 지원 아이템 선택')),
        body: PartyItemSelectionPage(),
      ),
    );
  }
}

이제 앱이 실행되면 Stepper 위젯이 표시되고, 사용자는 파티원 수를 선택한 후에 아이템을 선택할 수 있습니다. 선택된 내용은 결과 스텝에서 텍스트로 표시됩니다.

이제 여러분은 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 파티원 수에 맞추어 파티 지원 아이템을 선택하는 게임 도우미 앱을 만들 수 있습니다. 추가적으로 앱에 다양한 기능을 추가해보세요!

더 자세한 정보는 공식 Flutter 문서를 참고하시기 바랍니다.