[flutter] 플러터 TimePicker의 버튼 커스터마이징 방법

07 Dec 2023

flutter

플러터에서는 showTimePicker() 메서드를 사용하여 TimePicker 다이얼로그를 표시할 수 있습니다. 하지만 기본적으로 제공되는 다이얼로그는 애플리케이션의 디자인과 일치하지 않을 수 있습니다. 따라서 이번 글에서는 플러터 TimePicker의 버튼을 커스터마이징하는 방법에 대해 알아보겠습니다.

1. 패키지 추가

우선, 버튼 커스터마이징을 위해 flutter_custom_dialog 패키지를 추가해야 합니다. 이 패키지는 플러터의 다이얼로그를 커스터마이징할 수 있는 기능을 제공합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가하세요:

dependencies:
  flutter_custom_dialog: ^1.2.0

다음으로 패키지를 가져오기 위해 main.dart 파일에 다음을 추가하세요:

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

2. 버튼 커스터마이징

버튼을 커스터마이징하기 위해 showTimePicker() 대신 showCustomTimePicker() 메서드를 사용합니다. 이 메서드는 builder 매개변수를 통해 커스터마이징된 위젯을 반환해야 합니다. 예를 들어, 다음과 같이 버튼을 커스터마이징할 수 있습니다:

YYDialog yyDialog = YYDialog();
yyDialog.build(context)
  ..title = Text('Select Time')
  ..gravity = Gravity.center
  ..widget(builder: (context) {
    return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      // TimePicker
      TimePickerSpinner(
        is24HourMode: false,
        normalTextStyle: TextStyle(fontSize: 18),
        highlightedTextStyle: TextStyle(fontSize: 22, color: Colors.blue),
        spacing: 40,
        itemHeight: 35,
      ),

      // Buttons
      SizedBox(height: 10),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FlatButton(
            child: Text("Cancel"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          FlatButton(
            child: Text("OK"),
            onPressed: () {
              // Handle time selection
            },
          ),
        ],
      ),
    ]);
  })
  ..show();

위 코드에서는 TimePickerSpinner 위젯을 사용하여 TimePicker를 생성하고, 커스터마이즈된 버튼을 추가하였습니다. FlatButton 두 개를 추가하여 ‘Cancel’과 ‘OK’ 버튼을 생성하고, 각 버튼에 대한 onPressed 이벤트를 처리할 수 있습니다.

이와 같이 커스터마이즈된 TimePicker를 사용하면 애플리케이션의 디자인에 더욱 일치시킬 수 있습니다.

1. 패키지 추가

2. 버튼 커스터마이징

참고 자료