[flutter] 플러터 DatePicker의 테마 변경하기

08 Dec 2023

flutter

플러터의 DatePicker 위젯은 날짜 및 시간을 선택하는 데 사용됩니다. 기본적으로 시스템 테마를 따르지만, 경우에 따라 사용자 정의 테마를 적용해야 할 수 있습니다. 이 포스트에서는 플러터 DatePicker 위젯의 테마를 변경하는 방법에 대해 알아보겠습니다.

기본 테마

플러터의 DatePicker 위젯은 기본적으로 기기의 시스템 테마를 사용합니다. 따라서 다크 모드나 라이트 모드에 따라 테마가 자동으로 변경됩니다.

사용자 정의 테마

만약 DatePicker 위젯의 테마를 직접 제어하고 싶다면, ThemeData를 사용하여 사용자 정의 테마를 적용할 수 있습니다.

아래는 DatePicker 위젯에 라이트 모드와 다크 모드에 대한 각각의 테마를 적용하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePicker 테마 변경 예제'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(2021),
              lastDate: DateTime(2022),
              builder: (BuildContext context, Widget child) {
                return Theme(
                  data: Theme.of(context).copyWith(
                    colorScheme: ColorScheme.light(),
                    textTheme: TextTheme(bodyText1: TextStyle(color: Colors.black)),
                    backgroundColor: Colors.white,
                  ),
                  child: child,
                );
              },
            );
          },
          child: Text('날짜 선택'),
        ),
      ),
    );
  }
}

위 코드에서 Theme 위젯을 사용하여 DatePicker 위젯의 테마를 변경하였습니다.

플러터의 DatePicker를 사용할 때 사용자 정의 테마를 적용하는 방법에 대해 알아보았습니다. 사용자 정의 테마를 적용하여 앱을 보다 매력적으로 만들어보세요!

기본 테마

사용자 정의 테마

참고 자료