[flutter] DropdownButton을 사용하여 레벨 선택 기능 구현하기

08 Dec 2023

flutter

Flutter 앱을 개발하면서 사용자가 레벨을 선택할 수 있는 기능이 필요한 경우가 있습니다. DropdownButton Widget을 사용하여 사용자가 레벨을 선택할 수 있는 드롭다운 메뉴를 구현할 수 있습니다.

먼저, Flutter 프로젝트의 pubspec.yaml 파일의 dependencies 섹션에 flutter/material.dart를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  # 다른 dependencies와 함께
  material: ^5.1.0

2. DropdownButton 추가

다음으로, DropdownButton을 현재 스크린에 추가합니다.

import 'package:flutter/material.dart';

class LevelSelectionScreen extends StatefulWidget {
  @override
  _LevelSelectionScreenState createState() => _LevelSelectionScreenState();
}

class _LevelSelectionScreenState extends State<LevelSelectionScreen> {
  String _selectedLevel;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Level'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Select a level:',
            ),
            DropdownButton<String>(
              value: _selectedLevel,
              onChanged: (String newValue) {
                setState(() {
                  _selectedLevel = newValue;
                });
              },
              items: <String>['Beginner', 'Intermediate', 'Advanced', 'Expert']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 DropdownButton Widget을 사용하여 사용자가 레벨을 선택할 수 있는 드롭다운 메뉴를 구현했습니다.

결론

이제 DropdownButton Widget을 사용하여 Flutter 앱에서 레벨 선택 기능을 구현할 수 있습니다. 사용자가 특정 레벨을 선택하면 해당 레벨에 대한 액션을 실행하도록 추가로 구현할 수 있습니다.

DropdownButton Widget에 대한 자세한 정보는 Flutter 공식 문서를 참조해주세요.

1. DropdownButton Widget 추가

2. DropdownButton 추가

결론