Flutter Setting 화면 만들기 UI 코드 - Setting_UI 커스텀 하여 사용하기 switch

 

지난 글에서 라이브러리로 Setting 화면 빌드하는 방법에 대해 포스팅 했었다. 

 

2023.08.24 - [develop/Flutter] - Flutter Setting 화면 만들기 UI 코드 - settings_ui

Flutter Setting 화면 만들기 UI 코드 - settings_ui

 

글 말미에 커스텀 이야기를 했는데, 

역시 세상에는 똑똑한 개발자가 많다. 

 

 

보통 다른 뷰와 비슷하게 빌드하려면 

배경색상만 변경하면 비슷해지는 것 같다. 

 

라이브러리에서는 

배경 색상을 변경할 수 있는데 

  lightTheme: SettingsThemeData(
    settingsListBackground: Theme.of(context).scaffoldBackgroundColor,
  ),
  darkTheme: SettingsThemeData(
    settingsListBackground: Theme.of(context).scaffoldBackgroundColor,
  ),

 

이렇게 하면 된다. 

SafeArea(
child: SettingsList(
  lightTheme: SettingsThemeData(
    settingsListBackground: Theme.of(context).scaffoldBackgroundColor,
  ),
  darkTheme: SettingsThemeData(
    settingsListBackground: Theme.of(context).scaffoldBackgroundColor,
  ),
  applicationType: ApplicationType.both,
  sections: [
    SettingsSection(
      title: Text('DISPLAY ZOOM'),
      tiles: [
        SettingsTile.navigation(
          onPressed: (_) {},
          title: Text('View'),
          value: Text('Standard'),
          description: Text(
            'Choose a view for iPhone. '
          ),
        ),
      ],
    ),
  ],
),
),

 

SettingsThemeData 에는 아래와 같은 값이 존재합니다. 

(new) SettingsThemeData SettingsThemeData({
  Color? trailingTextColor,
  Color? settingsListBackground,
  Color? settingsSectionBackground,
  Color? dividerColor,
  Color? tileHighlightColor,
  Color? titleTextColor,
  Color? leadingIconsColor,
  Color? tileDescriptionTextColor,
  Color? settingsTileTextColor,
  Color? inactiveTitleColor,
  Color? inactiveSubtitleColor,
})

 

 예를 들어 아래와 같이 설정하면

SettingsThemeData(
    trailingTextColor: Colors.amber,
    settingsListBackground: Colors.pink,
    settingsSectionBackground: Colors.blue,
    dividerColor: Colors.lightGreen,
    tileHighlightColor: Colors.purple,
    titleTextColor: Colors.lime,
    leadingIconsColor: Colors.red,
    tileDescriptionTextColor: Colors.teal,
    settingsTileTextColor: Colors.black,
    inactiveTitleColor: Colors.indigoAccent,
    inactiveSubtitleColor: Colors.grey,
),

 

이렇게 빌드가 된다. 

 

과연 안드에서는 어떻게 빌드 될까요

 

자, 묘하게 다르죠

스위치는 같은 디자인인 것 같습니다.

하지만 radius나 padding, margin이 조금씩 다른 걸 볼 수 있습니다. 

iOS, AOS를 다르게 빌드 해줘서 너무 너무 좋습니다. 

 

이제 저만 디자인 잘하면 되겠네요.

뭐가 되었든 설정 화면을 이렇게 쉽게 빌드 할 수 있는건 좋은 것 같습니다. 

화면 개발을 10분이면 할 수 있으니깐요. 

이제 기능을 추가해 보겠습니다.

 

반응형