[flutter] 플러터 DatePicker의 높이 조절하기

08 Dec 2023

flutter

플러터로 앱을 개발하다 보면 DatePicker의 디자인을 사용자 정의하고 싶을 때가 있습니다. 이때 DatePicker의 높이를 조절하는 방법을 살펴보겠습니다.

1. DatePicker의 높이 조절하기

DatePicker의 높이를 조절하려면 아래와 같은 단계가 필요합니다.

1.1. 커스텀 DatePicker 위젯 생성하기

첫 번째 단계는 커스텀 DatePicker 위젯을 생성하는 것입니다. 이를 위해 StatefulWidget을 확장하는 새 위젯을 만들어야 합니다.

1.2. 레이아웃 빌더 활용하기

DatePicker 위젯의 레이아웃을 빌드할 때 Container 위젯의 height 속성을 조절하여 높이를 변경할 수 있습니다. 필요한 높이 값을 지정하여 Container를 구성하면 됩니다.

class CustomDatePicker extends StatefulWidget {
  @override
  _CustomDatePickerState createState() => _CustomDatePickerState();
}

class _CustomDatePickerState extends State<CustomDatePicker> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200.0, // 원하는 높이값으로 지정
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: // 원하는 DatePicker UI 구성
      ),
    );
  }
}

위와 같이 Container 위젯을 사용하여 DatePicker의 높이를 조절할 수 있습니다.

1.3. 커스텀 DatePicker 사용하기

마지막으로, 커스텀 DatePicker를 사용하여 화면에 표시합니다.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Dialog(
      child: CustomDatePicker(),
    );
  },
);

2. 마치며

이렇게하면 플러터 앱에서 DatePicker의 높이를 쉽게 조절할 수 있습니다.

이상으로 플러터 DatePicker의 높이 조절하기에 대한 간단한 가이드였습니다.

참고 문헌:

Flutter Docs: https://flutter.dev/docs