flutter_ui_kit_setting 0.1.16

A reusable Flutter UI kit for application settings screens.

flutter_ui_kit_setting

Flutter 앱에 설정 화면을 빠르게 추가할 수 있는 UI 키트. 타일 조합 방식으로 앱 버전 표시, 테마/브랜드 전환, 이메일 문의, 앱 공유, 스토어 링크 등 자주 쓰이는 설정 항목을 즉시 구성할 수 있다.

Features

• 조합 가능한 타일: 레이블, 스위치, 네비게이션 등 목적별 타일 위젯 제공
• 앱 정보 타일: 버전/빌드번호 자동 조회 (package_info_plus)
• 테마/브랜드 전환 타일: flutter_ui_kit_theme의 DsThemeToggle / DsBrandToggle 내장
• 외부 연동 타일: 이메일 작성, 앱 공유, App Store/홈페이지 URL 열기
• 템플릿 함수: buildDefaultSettingSections()로 자주 쓰는 섹션 일괄 생성
• SettingGearButton: 설정 진입점 기어 아이콘 버튼 (애니메이션 옵션)

Getting started

dependencies:
  flutter_ui_kit_setting: ^0.1.16

flutter_ui_kit_theme 패키지를 함께 사용한다. 앱에 DsThemeController가 설정되어 있으면 테마/브랜드 전환 타일을 바로 연결할 수 있다.

Usage

1. SettingScreen — 전체 설정 화면

import 'package:flutter_ui_kit_setting/flutter_ui_kit_setting.dart';

SettingScreen(
  sections: [
    SettingSection(
      title: '일반',
      items: [
        SettingThemeToggleTile(controller: themeController),
        SettingBrandToggleTile(controller: themeController),
      ],
    ),
    SettingSection(
      title: '앱 정보',
      items: [
        SettingAppVersionTile(),
        SettingDeveloperEmailTile(email: '[e-mail]'),
      ],
    ),
  ],
)

2. 템플릿으로 빠르게 구성

자주 쓰이는 섹션 조합을 한 번에 생성한다.

SettingScreen(
  sections: buildDefaultSettingSections(
    controller: themeController,
    developerEmail: '[e-mail]',
    appStoreUrl: 'https://apps.apple.com/...',
    homepageUrl: 'https://example.com',
    shareText: '이 앱을 추천합니다!',
  ),
)

3. 개별 타일 사용

각 타일을 직접 조합하거나 기존 ListView에 삽입할 수 있다.

// 기본 탭 타일
SettingTile(
  label: '언어',
  subtitle: '한국어',
  leading: Icon(Icons.language),
  onTap: () { /* 언어 선택 */ },
)

// 스위치 타일
SwitchTile(
  label: '알림',
  value: notificationsEnabled,
  onChanged: (v) => setState(() => notificationsEnabled = v),
)

// 다음 화면으로 이동 (trailing에 chevron 자동 표시)
NavigationTile(
  label: '개인정보 처리방침',
  onTap: () => Navigator.push(context, ...),
)

// 앱 버전 자동 표시
SettingAppVersionTile()

// 테마 모드 순환 (Light → Dark → System)
SettingThemeToggleTile(controller: themeController)

// 브랜드 전환 (Violet ↔ Emerald)
SettingBrandToggleTile(controller: themeController)

// 이메일 문의
SettingDeveloperEmailTile(
  email: '[e-mail]',
  subject: '문의하기',    // 선택
  body: '앱 버전: ...',  // 선택
)

// 앱 공유
SettingAppShareTile(shareText: '이 앱을 추천합니다!')

// 스토어 링크
SettingAppStoreTile(storeUrl: 'https://apps.apple.com/...')

// 홈페이지
SettingAppHomepageTile(homepageUrl: 'https://example.com')

// 커스텀 위젯 삽입
CustomWidgetTile(child: MyCustomWidget())

4. SettingGearButton — 설정 진입점 버튼

// AppBar action에 배치
AppBar(
  actions: [
    SettingGearButton(
      onTap: () => Navigator.push(context, ...),
      animate: true,  // 탭 시 회전 애니메이션
    ),
  ],
)

API Reference

화면 / 구조

클래스	설명
SettingScreen	섹션 목록을 받아 스크롤 가능한 설정 화면 렌더링
SettingSection	섹션 데이터 모델 (title, items)
SettingSectionWidget	SettingSection을 카드로 렌더링

타일

클래스	설명
SettingTile	기본 타일 (label, subtitle, leading, trailing, onTap)
SwitchTile	토글 스위치 포함 타일
NavigationTile	trailing에 chevron 아이콘 자동 표시
CustomWidgetTile	임의 위젯을 타일 영역에 삽입
SettingAppVersionTile	앱 버전/빌드번호 비동기 표시
SettingThemeToggleTile	Light / Dark / System 순환 전환
SettingBrandToggleTile	Violet / Emerald 브랜드 전환
SettingDeveloperEmailTile	이메일 표시 및 메일 앱 실행
SettingAppShareTile	텍스트 공유 시트 실행
SettingAppStoreTile	App Store / Play Store URL 열기
SettingAppHomepageTile	홈페이지 URL 열기

위젯 / 토큰 / 템플릿

항목	설명
SettingGearButton	설정 진입 기어 버튼 (animate 옵션)
SettingSpacing	x1=8, x2=16, x3=24, x4=32
SettingRadius	sm=8, md=12, lg=16
buildDefaultSettingSections()	자주 쓰는 섹션 조합을 List

Additional information

• flutter_ui_kit_theme의 DsThemeController 없이도 각 타일을 독립적으로 사용 가능
• 이슈 및 기여: GitHub