[flutter] 플러터 커퍼티노 스테퍼의 스타일 변경하기

05 Dec 2023

flutter

플러터(Flutter)에서는 커퍼티노 스테퍼(Cupertino Stepper)를 사용하여 iOS 스타일의 스텝 인터페이스를 구현할 수 있습니다. 하지만 기본적으로 제공되는 스타일은 앱의 디자인과 다를 수 있습니다. 이러한 경우, 커퍼티노 스테퍼의 스타일을 변경하는 방법을 알아보겠습니다.

커퍼티노 스테퍼 스타일 변경하기

커퍼티노 스테퍼의 스타일을 변경하려면 CupertinoTheme 위젯을 사용하여 전체 앱의 테마를 수정해야 합니다. CupertinoTheme을 사용하면 앱 전체에서 커스텀 컨트롤 스타일을 적용할 수 있습니다.

CupertinoTheme(
  data: CupertinoThemeData(
    primaryColor: Colors.indigo, // 원하는 색상으로 변경
  ),
  child: CupertinoStepper(
    ...
  ),
);

위의 코드에서는 CupertinoTheme을 사용하여 전체 앱의 테마를 수정하고, primaryColor를 변경하여 스테퍼의 기본 색상을 원하는 색상으로 설정합니다.

또한, CupertinoThemeData에서 다른 속성들을 설정하여 스타일을 변경할 수도 있습니다. 예를 들어, textTheme을 사용하여 텍스트 스타일을 수정할 수 있습니다.

CupertinoTheme(
  data: CupertinoThemeData(
    textTheme: CupertinoTextThemeData(
      dateTimePickerTextStyle: TextStyle(
        color: Colors.red, // 텍스트 색상 변경
        fontSize: 18, // 폰트 크기 변경
      ),
    ),
  ),
  child: CupertinoStepper(
    ...
  ),
);

위의 예제에서는 textTheme을 사용하여 dateTimePickerTextStyle의 텍스트 스타일을 변경합니다. 색상을 빨간색으로, 폰트 크기를 18로 설정했습니다.

커퍼티노 스테퍼 스타일 변경하기

참고 자료