[flutter] DropdownButton 위젯에 아이템을 동적으로 추가하기

08 Dec 2023

flutter

Flutter 앱에서 DropdownButton을 사용하여 사용자에게 선택 옵션을 제공하는 경우, 아이템 목록을 동적으로 추가해야 할 수도 있습니다. 예를 들어, 네트워크 요청 결과나 사용자 입력에 따라 선택 옵션을 업데이트해야 하는 경우가 있을 것입니다. 이러한 경우에 DropdownButton 위젯에 아이템을 동적으로 추가하는 방법에 대해 살펴보겠습니다.

DropdownButton 위젯

DropdownButton 위젯은 터치하여 선택할 수 있는 항목 목록을 표시하는 데 사용됩니다. 이 위젯은 현재 선택된 항목을 표시하고, 선택할 항목 목록을 드롭다운으로 제공합니다.

아이템을 동적으로 추가하기

DropdownButton 위젯에 아이템을 동적으로 추가하려면 StatefulWidget을 사용하여 DropdownButton을 다시 빌드할 때 아이템 목록을 업데이트해야 합니다.

아래는 DropdownButton 위젯에 아이템을 동적으로 추가하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

class DynamicDropdownExample extends StatefulWidget {
  @override
  _DynamicDropdownExampleState createState() => _DynamicDropdownExampleState();
}

class _DynamicDropdownExampleState extends State<DynamicDropdownExample> {
  List<String> _items = ['Item 1', 'Item 2', 'Item 3'];
  String _selectedItem = 'Item 1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          value: _selectedItem,
          items: _items.map((String item) {
            return DropdownMenuItem<String>(
              value: item,
              child: Text(item),
            );
          }).toList(),
          onChanged: (String? selectedItem) {
            setState(() {
              _selectedItem = selectedItem!;
            });
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _items.add('New Item');
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

위의 예제 코드에서는 DropdownButton 위젯을 동적으로 추가하기 위해 FloatingActionButton을 통해 새로운 아이템을 추가하도록 설정되어 있습니다. 새로운 아이템을 추가한 후 setState를 호출하여 화면을 다시 빌드해줍니다.

이제 위의 예제 코드를 사용하여 DropdownButton 위젯에 아이템을 동적으로 추가하는 방법에 대해 알아보았습니다.

결론

이제 Flutter의 DropdownButton 위젯에 아이템을 동적으로 추가하는 방법에 대해 알아보았습니다. 이를 통해 앱에서 선택 옵션을 동적으로 관리하고 업데이트할 수 있게 되었습니다.

참고 자료: