DropDownButton

카드 결제페이지에서 할부여부 버튼을 누르면 아래와 같이 나오게 할것이다.

pubdev에 있는 dropdown_button2 라이브러리 사용한다.

의존성 추가

 

버튼을 누르면 rebuild해서 보여주기 때문에 statefulwidget으로 만들어준다.

 

리스트로 보여줄 것들을 아이템에 담아준다. 

map()함수를 사용하여 items 안에 있는 문자열을 DropdownMenuItem인스턴스로 변환한다.

그리고toList()함수를 사용하여 다시 리스트로 변환시켜서 items프로퍼티에 리스트를 저장한다.

 

 

마지막으로 꼭 높이지정을 해준다. 

나는 Container로 높이지정을 해주었다...(이거때문에 시간을 한참 잡아먹음..)

 

동작결과

 

코드

import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

class PaymentPeriod extends StatefulWidget {
  const PaymentPeriod({Key? key}) : super(key: key);

  @override
  State<PaymentPeriod> createState() => _PaymentPeriodState();
}

class _PaymentPeriodState extends State<PaymentPeriod> {
  final List<String> items = [
    '일시불',
    '2개월(무)',
    '3개월(무)',
    '4개월(무)',
    '5개월(무)',
    '6개월(무)',
    '7개월(무)',
    '8개월(무)',
    '9개월(무)',
    '10개월(무)',
    '11개월(무)',
    '12개월(무)',
  ];
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          hint: Text(
            'Select Item1',
            style: TextStyle(
              fontSize: 14,
              color: Theme.of(context).hintColor,
            ),
          ),
          items: items
              .map((item) => DropdownMenuItem<String>(
                    value: item,
                    child: Text(
                      item,
                      style: const TextStyle(
                        fontSize: 14,
                      ),
                    ),
                  ))
              .toList(),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value as String;
            });
          },
          buttonHeight: 40,
          buttonWidth: 140,
          itemHeight: 40,
        ),
      ),
    );
  }
}