[flutter] DropdownButton 위젯을 사용하여 주문 상태 선택 기능 구현하기

08 Dec 2023

flutter

Flutter 앱에서 주문 상태를 선택하는 드롭다운 메뉴를 구현해야 하는 경우가 있습니다. 이를 위해 Flutter에서는 DropdownButton 위젯을 사용하여 쉽게 구현할 수 있습니다. 이번 글에서는 DropdownButton 위젯을 사용하여 주문 상태를 선택하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. DropdownButton 위젯 이해하기

DropdownButton 위젯은 선택할 수 있는 옵션 목록을 제공하고, 사용자가 옵션을 선택할 때마다 해당 값을 표시합니다. 이를 통해 주문 상태와 같은 선택 기능을 구현할 수 있습니다.

2. DropdownButton 위젯을 사용하여 주문 상태 선택 기능 구현하기

먼저, DropdownButton을 사용하기 위해 필요한 패키지를 import 합니다.

import 'package:flutter/material.dart';

다음으로 DropdownButton을 포함할 StatefulWidget을 생성합니다.

class OrderStatusDropdown extends StatefulWidget {
  @override
  _OrderStatusDropdownState createState() => _OrderStatusDropdownState();
}

class _OrderStatusDropdownState extends State<OrderStatusDropdown> {
  String selectedOrderStatus;
  
  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: selectedOrderStatus,
      items: <String>['주문 접수', '배송 중', '배송 완료', '취소'].map((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
      onChanged: (String newValue) {
        setState(() {
          selectedOrderStatus = newValue;
          // 선택된 주문 상태에 대한 처리 로직 추가
        });
      },
    );
  }
}

위 코드에서는 DropdownButton 위젯을 생성하고, 선택할 수 있는 옵션 목록을 정의하고, 사용자가 옵션을 선택했을 때의 처리 로직을 추가하였습니다.

마지막으로, 위에서 작성한 OrderStatusDropdown 위젯을 화면에 표시합니다.

class OrderStatusPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('주문 상태 변경'),
      ),
      body: Center(
        child: OrderStatusDropdown(),
      ),
    );
  }
}

마무리

이제 DropdownButton 위젯을 사용하여 주문 상태 선택 기능을 구현하는 방법에 대해 알아보았습니다. DropdownButton을 사용하면 간편하게 다양한 선택 기능을 구현할 수 있으며, 필요에 따라 UI를 수정하여 보다 사용자 친화적인 기능을 구현할 수 있습니다.

참고 자료

Flutter 공식 문서: https://flutter.dev/docs
Flutter DropdownButton 위젯 API 문서: https://api.flutter.dev/flutter/material/DropdownButton-class.html