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

앱을 만들면 80% 이상은 설정화면이 필요한 것 같습니다.

늘 직접 코딩해서 사용하다, 이번에는 너무 귀찮기도 하고

시간도 없어 라이브러리를 사용하기로 했습니다.

그래서 원하는대로 나올지는 알수 없지만 

빠르고 얼추 나오면 뭐 상관없지 않을까 해서 적용기를 작성해보고자 합니다. 

 

라이브러리는 "settings_ui"을 사용합니다. 

https://pub.dev/packages/settings_ui

settings_ui | Flutter Package

 

pub에 설치합니다. 

flutter pub add settings_ui

 

dependencies:
  settings_ui: ^2.0.2

 

 

제공되는 예제를 간단히만 적용한 것 입니다. 

import 'package:settings_ui/settings_ui.dart';


class SettingView extends StatelessWidget {
  SettingView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SettingsList(
          sections: [
            SettingsSection(
              title: Text('Common'),
              tiles: <SettingsTile>[
                SettingsTile.navigation(
                  leading: Icon(Icons.language),
                  title: Text('Language'),
                  value: Text('English'),
                ),
                SettingsTile.switchTile(
                  onToggle: (value) {},
                  initialValue: true,
                  leading: Icon(Icons.format_paint),
                  title: Text('Enable custom theme'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

정말 간단히 적용한 코드이며 예제에 나오는 코드입니다. 

 

아래의 코드를 적용하면 위 이미지처럼 빌드됩니다. 

SettingsList(
          sections: [
            SettingsSection(
              title: Text('DISPLAY ZOOM'),
              tiles: [
                SettingsTile.navigation(
                  onPressed: (_) {},
                  title: Text('View'),
                  value: Text('Standard'),
                  description: Text(
                    'Choose a view for iPhone. '
                    'Zoomed shadows larger controls. '
                    'Standart shows more content.',
                  ),
                ),
              ],
            ),
            SettingsSection(
              title: Text('UI AUTOMATION'),
              tiles: [
                SettingsTile.switchTile(
                  onToggle: (_) {},
                  initialValue: true,
                  title: Text('Enable UI Automation'),
                ),
                SettingsTile.navigation(
                  title: Text('Multipath Networking'),
                ),
                SettingsTile.switchTile(
                  onToggle: (_) {},
                  initialValue: false,
                  title: Text('HTTP/3'),
                ),
              ],
            ),
            SettingsSection(
              title: Text('IAD DEVELOPER APP TESTING'),
              tiles: [
                SettingsTile.navigation(
                  title: Text('Fill Rate'),
                ),
                SettingsTile.navigation(
                  title: Text('Add Refresh Rate'),
                ),
                SettingsTile.switchTile(
                  onToggle: (_) {},
                  initialValue: false,
                  title: Text('Unlimited Ad Presentation'),
                ),
              ],
            ),
            SettingsSection(
              title: Text('STATE RESTORATION TESTING'),
              tiles: [
                SettingsTile.switchTile(
                  onToggle: (_) {},
                  initialValue: false,
                  title: Text(
                    'Fast App Termination',
                  ),
                  description: Text(
                    'Terminate instead of suspending apps when backgrounded to '
                    'force apps to be relaunched when tray '
                    'are foregrounded.',
                  ),
                ),
              ],
            ),
            SettingsSection(
              title: Text('General'),
              tiles: [
                SettingsTile.navigation(
                  title: Text('Abstract settings screen'),
                  leading: Icon(CupertinoIcons.wrench),
                  description:
                      Text('UI created to show plugin\'s possibilities'),
                  onPressed: (context) {
                    Navigator.push(
                      context,
                      CupertinoPageRoute(
                        builder: (_) => Container(),
                      ),
                    );
                  },
                )
              ],
            ),
            SettingsSection(
              title: Text('APPEARANCE'),
              tiles: [
                SettingsTile.switchTile(
                  onToggle: (value) {
                    setState(() {
                      darkTheme = value;
                    });
                  },
                  initialValue: darkTheme,
                  title: Text('Dark Appearance'),
                ),
              ],
            ),
            SettingsSection(
              title: Text('Common'),
              tiles: <SettingsTile>[
                SettingsTile.navigation(
                  leading: Icon(Icons.language),
                  title: Text('Language'),
                  value: Text('English'),
                ),
                SettingsTile.switchTile(
                  onToggle: (value) {},
                  initialValue: true,
                  leading: Icon(Icons.format_paint),
                  title: Text('Enable custom theme'),
                ),
              ],
            ),
          ],
        ),

 

 

이 라이브러리가 좋은 것은 iOS 디자인인 Cupertino 와 AOS 디자인인 Material 이 함께 제공된다는 것입니다. 

하지만 저는 시간이 없는 관계로 넘어 가겠습니다. 하하

 

그리고 화면 전환하는 것도 플랫폼에 따라 다르게 적용할 수 있습니다. 

 

단점도 있는데요. 

자유롭지 못한 디자인이라는 것입니다. 

반응형

디자인팀에서 극대노 할 만한 기본 디자인이라는 것입니다. 

개인 개발자에게는 뭔 상관이냐 싶습니다만

그래도 다른 화면과 비슷하게라도 가야하는데

혼자 플랫폼 디자인처럼 놀고 있는 모습이 약간은 열 받습니다. 

 

이미 있는 기능을 발견 못한 저는 문맹인가봅니다. 

디자인을 추가 할 수 있는 방법입니다. 

2023.08.25 - [분류 전체보기] - Flutter Setting 화면 만들기 UI 코드 - Setting_UI 커스텀 하여 사용하기 switch

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