Files
life-helper/app/lib/ui/screens/settings_screen.dart
joungmin 14632e11df [05-Designer] #218 UX 다듬기 — RAM 게이트 문구 + 옵트아웃 표현
Round 2 QA PASS 후 user-facing 문구 3건 정리.

1) AC-6 RAM 게이트 안내: "이 단말의 RAM 이 부족합니다 (필요: 4GB 이상)"
   → "이 단말에서는 AI 도움을 사용할 수 없어요 (RAM 4GB 이상 필요)".
   Planner spec 톤과 align. "부족합니다" (비난 어조) → "사용할 수 없어요"
   (정보 제공 톤). 안내문 끝 마침표 제거.

2) ModelAvailability.missing 메시지가 RAM 게이트 active 상태에서 "위
   토글을 켜면" 안내를 표시해 모순 발생. meetsRam=false 분기 추가 →
   "이 단말은 모델을 받을 수 없어요 (RAM 4GB 이상 필요)" 노출.

3) _confirmOptOut 보조 텍스트 "다시 켜면 다시 다운로드해야 합니다"
   → "다시 켜면 처음부터 다운로드합니다". "다시" 중복 제거 + 호흡 정리.

기능 동작 변화 0. analyze clean, 88/88 통과.

Refs #218
2026-06-12 15:58:54 +09:00

361 lines
12 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../data/ai/model_lifecycle.dart';
import '../../state/ai_providers.dart';
class SettingsScreen extends ConsumerWidget {
const SettingsScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(title: const Text('설정')),
body: ListView(
children: const [
_SectionHeader('AI 도움'),
_AiSection(),
],
),
);
}
}
class _SectionHeader extends StatelessWidget {
final String title;
const _SectionHeader(this.title);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
child: Text(
title,
style: Theme.of(context).textTheme.titleSmall,
),
);
}
}
class _AiSection extends ConsumerWidget {
const _AiSection();
@override
Widget build(BuildContext context, WidgetRef ref) {
final settings = ref.watch(aiSettingsProvider);
final availability = ref.watch(modelAvailabilityProvider);
final download = ref.watch(modelDownloadControllerProvider);
final ramOk = ref.watch(deviceMeetsAiRamProvider);
final optIn = settings.maybeWhen(data: (v) => v, orElse: () => false);
// #218 AC-6: gate the toggle when device RAM < 4GB. Default fail-closed
// (null → disabled) so the user can't trip download on an undersized
// device while the platform call is in flight.
final meetsRam = ramOk.maybeWhen(data: (v) => v, orElse: () => false);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SwitchListTile(
title: const Text('AI 도움 켜기'),
subtitle: Text(
meetsRam
? 'Gemma 4 E2B 모델 ≈ 2.4GB. 모든 처리는 단말에서 일어납니다.'
: '이 단말에서는 AI 도움을 사용할 수 없어요 (RAM 4GB 이상 필요)',
),
value: meetsRam && optIn,
onChanged: meetsRam
? (v) async {
if (v) {
final ok = await _confirmOptIn(context);
if (ok != true) return;
} else {
final ok = await _confirmOptOut(context);
if (ok != true) return;
}
final freed =
await ref.read(aiSettingsControllerProvider).setOptIn(v);
if (!context.mounted) return;
if (!v && freed > 0) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('공간 확보됨 ${_fmtMB(freed)}')),
);
}
}
: null,
),
availability.when(
loading: () => const ListTile(title: Text('상태 확인 중...')),
error: (e, _) => ListTile(title: Text('상태 오류: $e')),
data: (a) => ListTile(
title: const Text('모델 상태'),
subtitle: Text(_describe(a, meetsRam: meetsRam)),
),
),
if (optIn && download != null)
_DownloadProgressTile(progress: download, ref: ref),
const Padding(
padding: EdgeInsets.fromLTRB(16, 8, 16, 16),
child: Text(
'베타 기능 · 모델 다운로드가 정식 제공되기 전까지 일부 동작이 제한됩니다.',
style: TextStyle(fontSize: 12, color: Colors.grey),
),
),
],
);
}
String _describe(ModelAvailability a, {required bool meetsRam}) {
switch (a) {
case ModelAvailability.ready:
return '준비 완료 — 새 습관 만들기에서 ✨ AI 제안을 쓸 수 있어요';
case ModelAvailability.missing:
// RAM 게이트로 토글이 비활성인 상태에서 "토글을 켜면" 안내는 모순.
// 단말 미지원 메시지를 그대로 노출해서 사용자가 다음 행동을 알 수 있게.
return meetsRam
? '아직 받지 않았어요 — 위 토글을 켜면 다운로드합니다'
: '이 단말은 모델을 받을 수 없어요 (RAM 4GB 이상 필요)';
case ModelAvailability.corrupt:
return '파일이 손상됐어요 — 끄고 다시 켜면 새로 받습니다';
case ModelAvailability.downloading:
return '다운로드 중';
}
}
String _fmtMB(int bytes) {
final mb = bytes / (1024 * 1024);
return '${mb.toStringAsFixed(1)} MB';
}
Future<bool?> _confirmOptIn(BuildContext context) {
return showDialog<bool>(
context: context,
builder: (_) => AlertDialog(
title: const Text('AI 도움 켜기'),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'단말에서 동작하는 AI 모델을 내려받습니다.',
style: TextStyle(fontWeight: FontWeight.w600),
),
SizedBox(height: 12),
_Bullet('파일 크기: 약 2.4GB'),
_Bullet('WiFi 연결을 권장합니다'),
_Bullet('모든 처리는 단말에서만 일어나며, 입력 텍스트는 외부로 전송되지 않습니다'),
_Bullet('Gemma 이용약관(ai.google.dev/gemma/terms)에 동의합니다'),
],
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('취소'),
),
FilledButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text('동의하고 다운로드'),
),
],
),
);
}
Future<bool?> _confirmOptOut(BuildContext context) {
return showDialog<bool>(
context: context,
builder: (_) => AlertDialog(
title: const Text('AI 도움 끄기'),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('모델 파일이 단말에서 삭제됩니다.'),
SizedBox(height: 8),
Text(
'약 2.4GB 의 저장공간이 확보돼요.',
style: TextStyle(fontSize: 13, color: Colors.grey),
),
SizedBox(height: 4),
Text(
'다시 켜면 처음부터 다운로드합니다.',
style: TextStyle(fontSize: 13, color: Colors.grey),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('취소'),
),
FilledButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text('끄고 삭제'),
),
],
),
);
}
}
class _Bullet extends StatelessWidget {
final String text;
const _Bullet(this.text);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(top: 6, right: 8),
child: Icon(Icons.circle, size: 5),
),
Expanded(child: Text(text, style: const TextStyle(fontSize: 14))),
],
),
);
}
}
/// AC2: shows download progress + pause/resume/restart controls.
class _DownloadProgressTile extends StatelessWidget {
final DownloadProgress progress;
final WidgetRef ref;
const _DownloadProgressTile({required this.progress, required this.ref});
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final controller = ref.read(modelDownloadControllerProvider.notifier);
final pct = progress.totalBytes > 0
? (progress.bytesReceived / progress.totalBytes).clamp(0.0, 1.0)
: null;
final pctText = pct != null
? '${(pct * 100).toStringAsFixed(0)}%'
: '계산 중';
final size =
'${_fmtBytes(progress.bytesReceived)}'
'${progress.totalBytes > 0 ? " / ${_fmtBytes(progress.totalBytes)}" : ""}';
final (stateLabel, stateColor) = switch (progress.state) {
DownloadState.downloading => ('다운로드 중', scheme.primary),
DownloadState.paused => ('일시정지됨', scheme.outline),
DownloadState.failed => ('실패', scheme.error),
DownloadState.completed => ('준비 완료', Colors.green.shade700),
DownloadState.idle => ('대기 중', scheme.outline),
};
Widget controls;
switch (progress.state) {
case DownloadState.downloading:
controls = TextButton.icon(
icon: const Icon(Icons.pause),
label: const Text('일시정지'),
onPressed: controller.pause,
);
break;
case DownloadState.paused:
controls = FilledButton.tonalIcon(
icon: const Icon(Icons.play_arrow),
label: const Text('재개'),
onPressed: controller.resume,
);
break;
case DownloadState.failed:
controls = FilledButton.tonalIcon(
icon: const Icon(Icons.refresh),
label: const Text('다시 시도'),
onPressed: controller.resume,
);
break;
case DownloadState.completed:
case DownloadState.idle:
controls = const SizedBox.shrink();
break;
}
return Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
stateLabel,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: stateColor,
),
),
const SizedBox(height: 2),
Text(
progress.state == DownloadState.completed
? size
: '$size · $pctText',
style: TextStyle(
fontSize: 12,
color: scheme.onSurfaceVariant,
),
),
],
),
),
controls,
],
),
const SizedBox(height: 6),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: LinearProgressIndicator(
value: pct,
minHeight: 6,
),
),
if (progress.state == DownloadState.failed)
Padding(
padding: const EdgeInsets.only(top: 6),
child: Text(
_friendlyError(progress.errorMessage),
style: TextStyle(fontSize: 12, color: scheme.error),
),
),
],
),
);
}
/// Maps internal error codes to user-friendly Korean messages.
/// Hides technical detail (HTTP status, stack) — keeps the next action
/// obvious instead.
String _friendlyError(String? raw) {
if (raw == null) return '다운로드에 실패했어요. 다시 시도해주세요.';
if (raw.startsWith('network:')) {
return '네트워크 연결을 확인하고 다시 시도해주세요.';
}
if (raw.startsWith('http ')) {
return '서버 응답이 올바르지 않습니다. 잠시 후 다시 시도해주세요.';
}
if (raw.startsWith('stream:')) {
return '다운로드가 중단되었어요. 다시 시도하면 이어받습니다.';
}
if (raw == 'sha mismatch') {
return '파일이 손상되었어요. 다시 시도하면 처음부터 받습니다.';
}
return '다운로드에 실패했어요. 다시 시도해주세요.';
}
String _fmtBytes(int bytes) {
if (bytes < 1024) return '$bytes B';
if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB';
if (bytes < 1024 * 1024 * 1024) {
return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
}
return '${(bytes / (1024 * 1024 * 1024)).toStringAsFixed(2)} GB';
}
}