CupertinoPicker()

CupertinoPicker 위젯을 사용해서 다양한 picker를 만드는 방법에 대해서 알아보겠다

CupertinoPicker를 사용하면 dialog, bottomSheet, Container 안에서 원하는 디자인으로 커스텀이 가능하다

CupertinoPicker의 필수 인자 값으로 아이템의 간격을 조정하는 itemExtent, 값 변화를 제어하는 onSelectedItemChanged, children 이렇게 3개의 값이 있다

CupertinoPicker({
    Key? key,
    this.diameterRatio = _kDefaultDiameterRatio,
    this.backgroundColor,
    this.offAxisFraction = 0.0,
    this.useMagnifier = false,
    this.magnification = 1.0,
    this.scrollController,
    this.squeeze = _kSqueeze,
    required this.itemExtent,
    required this.onSelectedItemChanged,
    required List<Widget> children,
    this.selectionOverlay = const CupertinoPickerDefaultSelectionOverlay(),
    bool looping = false,
  }) 

여기서 사용할 아이템 리스트이다

 List<String> time = [
    '00:00',
    '01:00',
    '02:00',
    '03:00',
    '04:00',
    '05:00',
    '06:00',
    '07:00',
    '08:00',
    '09:00',
    '10:00',
    '11:00',
    '12:00',
  ];
  List<String> colorItem = [
    "Red",
    "Pink",
    "Orange",
    "Yellow",
    "amber",
    "Blue",
    "Purple",
    "Black",
    "White"
  ];

먼저 CupertinoPicker를 사용해서 값을 선택하는 picker를 만들겠다
onSelectedChanged에 colorString = colorItem[i]을 넣으면 변화되는 값을 받아올 수 있다

 Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 15),
                  child: Text(
                    colorString,
                    style: theme.textTheme.bodyText1!
                        .copyWith(color: Colors.deepPurple, fontSize: 32),
                  ),
                ),
                Container(
                  width: size.width * 0.8,
                  height: size.height * 0.25,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.deepPurple),
                  child: CupertinoPicker(
                      itemExtent: 75,
                      onSelectedItemChanged: (i) {
                        setState(() {
                          colorString = colorItem[i];
                        });
                      },
                      children: [
                        ...colorItem.map((e) => Text(
                              e,
                              style: theme.textTheme.bodyText1!
                                  .copyWith(color: Colors.amber, fontSize: 28),
                            ))
                      ]),
                ),
              ],
            ),

아래 코드는 CupertinoPicker.builder를 이용한 방법이다

CupertinoPicker에 초기 값을 넣어주는 방법은 controller를 이용하여 initalValue를 지정할 수 있다

final FixedExtentScrollController controller =
    FixedExtentScrollController(initialItem: 1);

 Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 15),
                  child: Text(
                    timeString.isEmpty ? "00:00" : timeString,
                    style: theme.textTheme.bodyText1!
                        .copyWith(color: Colors.teal, fontSize: 32),
                  ),
                ),
                Container(
                  width: size.width * 0.8,
                  height: size.height * 0.25,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.teal),
                  child: CupertinoPicker.builder(
                      itemExtent: 50,
                      childCount: time.length,
                      onSelectedItemChanged: (i) {
                        setState(() {
                          timeString = time[i];
                        });
                      },
                      itemBuilder: (context, index) {
                        return Text(
                          time[index],
                          style: theme.textTheme.bodyText1!
                              .copyWith(color: Colors.white, fontSize: 25),
                        );
                      }),
                ),
              ],
            ),

Example