[flutter] DropdownButton 위젯을 사용하여 도시 선택 기능 구현하기

08 Dec 2023

flutter

안녕하세요! flutter 앱 개발자 여러분, 오늘은 DropdownButton 위젯을 사용하여 사용자가 도시를 선택할 수 있는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. DropdownButton 위젯 소개

DropdownButton 위젯은 사용자가 선택할 수 있는 목록을 제공하는데 사용됩니다. 이 위젯을 사용하면 사용자가 터치하여 옵션 목록을 보고 선택할 수 있습니다.

2. DropdownButton 위젯 사용하기

아래는 DropdownButton를 사용하여 도시를 선택하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('도시 선택'),
        ),
        body: Center(
          child: DropdownButton<String>(
            items: <String>['서울', '대전', '대구', '부산']
                .map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String newValue) {
              print('선택한 도시: $newValue');
            },
            hint: Text('도시를 선택해주세요'),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 DropdownButton 위젯을 사용하여 ‘서울’, ‘대전’, ‘대구’, ‘부산’ 중에서 도시를 선택할 수 있도록 구현되어 있습니다.

items 속성에는 사용자가 선택할 수 있는 옵션 목록을 정의합니다. onChanged 속성은 사용자가 선택을 변경했을 때 호출되는 콜백 함수를 설정합니다.

3. DropdownButton 위젯을 활용한 도시 선택 기능

앱을 빌드하여 실행하면, DropdownButton 위젯을 터치하면 옵션 목록이 나타납니다. 사용자가 원하는 도시를 선택하면 선택한 도시가 콘솔에 출력됩니다.

지금까지 DropdownButton 위젯을 사용하여 도시 선택 기능을 구현하는 방법을 알아보았습니다. 이를 응용하여 사용자에게 다양한 선택지를 제공할 수 있는 인터랙티브한 앱을 만들어보세요!

더 많은 정보를 원하시거나 궁금한 점이 있으시면 flutter 공식 문서를 참고하시기 바랍니다.