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

08 Dec 2023

flutter

Flutter 애플리케이션의 사용자 인터페이스를 구축할 때 DropdownButton을 사용하여 시간을 선택하는 기능을 구현하는 것은 일상적인 작업입니다. 이 기능을 구현하는 방법을 살펴보겠습니다.

DropdownButton 위젯 이해하기

Flutter에서 DropdownButton 위젯은 드롭다운 목록을 제공하고 사용자가 항목을 선택할 수 있도록 합니다. 이를 사용하여 시간 선택 목록을 표시하고 선택된 항목을 처리할 수 있습니다.

시간 목록 표시하기

다음은 DropdownButton 위젯을 사용하여 시간 목록을 표시하는 예제 코드입니다.

import 'package:flutter/material.dart';

class TimeSelectionWidget extends StatefulWidget {
  @override
  _TimeSelectionWidgetState createState() => _TimeSelectionWidgetState();
}

class _TimeSelectionWidgetState extends State<TimeSelectionWidget> {
  String _selectedTime;

  List<String> _times = [
    '9:00 AM',
    '12:00 PM',
    '3:00 PM',
    '6:00 PM',
    '9:00 PM',
  ];

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: _selectedTime,
      items: _times.map((String time) {
        return DropdownMenuItem<String>(
          value: time,
          child: Text(time),
        );
      }).toList(),
      onChanged: (String newValue) {
        setState(() {
          _selectedTime = newValue;
        });
      },
    );
  }
}

위의 예제 코드에서는 DropdownButton을 사용하여 시간 목록을 표시하고 선택된 항목을 _selectedTime 변수에 저장합니다.

선택된 시간 처리하기

DropdownButton 위젯에서 선택된 항목을 처리하는 방법은 onChanged 콜백을 사용하는 것입니다. 사용자가 항목을 선택할 때마다 해당 콜백이 호출되며, 선택된 항목을 처리할 수 있습니다.

위의 예제 코드에서는 onChanged 콜백을 사용하여 선택된 시간을 _selectedTime 변수에 저장합니다.

결론

이제 Flutter에서 DropdownButton을 사용하여 시간 선택 기능을 구현하는 방법에 대해 알아보았습니다. DropdownButton을 사용하여 사용자가 편리하게 시간을 선택할 수 있도록 할 수 있습니다.