본문 바로가기
Flutter/Flutter FAQ

Flutter 날짜 선택기를 사용자 정의하는 방법, How to customize a date picker

by 베타코드 2023. 10. 1.
반응형

질문


저는 플러터 애플리케이션에서 showDatePicker() 메소드를 사용하여 날짜 선택기를 표시하고 있습니다. 날짜 선택기의 색상을 사용자 정의하는 방법은 무엇인가요?

여기에 제 테마의 코드가 있습니다:

class CustomTheme extends Theme {
  /*
   * 색상:
   *    기본 파랑: #335C81 (51, 92, 129)
   *    연한 파랑:   #74B3CE (116, 179, 206)
   *    노랑:       #FCA311 (252, 163, 17)
   *    빨강:          #E15554 (255, 85, 84)
   *    초록:        #3BB273 (59, 178, 115)
   */

  static int _fullAlpha = 255;
  static Color blueDark =  new Color.fromARGB(_fullAlpha, 51, 92, 129);
  static Color blueLight = new Color.fromARGB(_fullAlpha, 116, 179, 206);
  static Color yellow =    new Color.fromARGB(_fullAlpha, 252, 163, 17);
  static Color red =       new Color.fromARGB(_fullAlpha, 255, 85, 84);
  static Color green =     new Color.fromARGB(_fullAlpha, 59, 178, 115);

  static Color activeIconColor = yellow;


  CustomTheme(Widget child): super(
    child: child,
    data: new ThemeData(
      primaryColor: blueDark,
      accentColor: yellow,
      cardColor: blueLight,
      backgroundColor: blueDark,
      highlightColor: red,
      splashColor: green
    )
  );
}

여기에 페이지를 해당 테마로 래핑하는 코드가 있습니다:

  @override
  Widget build(BuildContext context) {
    [...]
    return new CustomTheme(
      new Scaffold(
        [...]
      )
    );
  }

답변


Flutter 2.0.2

    showDatePicker(
      builder: (context, child) {
        return Theme(
          data: Theme.of(context).copyWith(
            colorScheme: ColorScheme.light(
              primary: Colors.yellow, // 헤더 배경색
              onPrimary: Colors.black, // 헤더 텍스트 색상
              onSurface: Colors.green, // 본문 텍스트 색상
            ),
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                foregroundColor: Colors.red, // 버튼 텍스트 색상
              ),
            ),
          ),
          child: child!,
        );
      },
    );
  },
);

이미지 설명 입력

반응형

댓글