본문 바로가기

Flutter

[Flutter] 드롭다운 버튼(DropdownButton)

 

기존 몇 안되는 아이템(항목)은 이렇게 코드를 작성 했다.

 

SizedBox(
  width: 205,
  height: 40,
  child: DropdownButtonHideUnderline(
    child: Container(
      padding: const EdgeInsets.only(
        top: 4,
        bottom: 4,
        left: 14,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          width: 1,
          color: Colors.black,
        ),
        borderRadius: const BorderRadius.all(
          Radius.circular(5),
        ),
      ),
      child: DropdownButton(
        isExpanded: true,
        //화살표 아이콘
        icon: SvgPicture.asset('xxx.svg'),
        items: [
          DropdownMenuItem(
            value: 0,
            child: Text(
              '드롭다운 아이템 1번',
            ),
          ),
          DropdownMenuItem(
            value: 1,
            child: Text(
              '드롭다운 아이템 2번',
            ),
          ),
        ],
        value: dropValueCate,
        onChanged: (value) {
          setState(() {
            dropValueCate = value!;
          });
        },
      ),
    ),
  ),
),

 

아이템 항목이 많을 경우 List로 작성

final _pickupTime = [
    '10분',
    '20분',
    '30분',
    '40분',
    '50분',
    '60분',
    '70분',
    '80분',
    '90분',
    '100분'
  ];
  String? _selectedTime;
  
  @override
  void initState() {
    super.initState();
    setState(() {
      _selectedTime = _pickupTime[0];
    });
  }
				SizedBox(
                  width: 205,
                  height: 40,
                  child: DropdownButtonHideUnderline(
                    child: Container(
                      padding: const EdgeInsets.only(
                        top: 4,
                        bottom: 4,
                        left: 14,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.black,
                        border: Border.all(
                          width: 1,
                          color: Colors.black,
                        ),
                        borderRadius: const BorderRadius.all(
                          Radius.circular(5),
                        ),
                      ),
                      child: DropdownButton(
                        isExpanded: true,
                        icon: SvgPicture.asset(
                            '/***.svg'),
                        value: _selectedTime,
                        items: _pickupTime
                            .map((e) => DropdownMenuItem(
                                  value: e,
                                  child: Text(
                                    e,
                                    style: ***,
                                  ),
                                ))
                            .toList(),
                        onChanged: (value) {
                          setState(() {
                            _selectedTime = value!;
                          });
                        },
                      ),
                    ),
                  ),
                ),