[flutter] 플러터 DatePicker 스타일링하기

08 Dec 2023

flutter

이 문서에서는 Flutter 어플리케이션에서 DatePicker를 스타일링하는 방법에 대해 알아보겠습니다.

1. 기본 DatePicker

Flutter에서 기본적으로 제공하는 DatePicker는 Material 또는 Cupertino 스타일을 적용할 수 있습니다. 코드 예시는 아래와 같습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DatePicker 스타일링')
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(2021),
                lastDate: DateTime(2022),
              );
            },
            child: Text('DatePicker 열기'),
          ),
        ),
      ),
    );
  }
}

2. DatePicker 스타일링

2.1 Material DatePicker 스타일링

Material DatePicker를 커스터마이징하려면 theme을 사용하여 DatePickerTheme을 설정할 수 있습니다.

MaterialApp(
  theme: ThemeData(
    // DatePicker 스타일 설정
    datePickTheme: DatePickerTheme(
      containerHeight: 210.0,
    ),
  ),
  home: // ...
)

2.2 Cupertino DatePicker 스타일링

Cupertino DatePicker를 커스터마이징하려면 theme을 사용하여 CupertinoThemeData를 설정할 수 있습니다.

CupertinoApp(
  theme: CupertinoThemeData(
    // DatePicker 스타일 설정
    textTheme: CupertinoTextThemeData(
      dateTimePickerTextStyle: TextStyle(color: Colors.blue),
    ),
  ),
  home: // ...
)

3. 참고 자료

위의 내용들을 통해 원하는 스타일의 DatePicker를 구현할 수 있을 것입니다.