Flutter에서 iOS Live Activity 잠금화면 미리보기 만들기 — CustomPainter로 네이티브 위젯 재현

ActivityConfiguration(for: TripActivityAttributes.self) { context in
    // Lock Screen View — 여기가 잠금화면에 표시되는 뷰
    LockScreenView(state: context.state)
} dynamicIsland: { context in
    // Dynamic Island 뷰들...
}

// 기존 미리보기 — Dynamic Island compact 시뮬레이션
Container(
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
  decoration: BoxDecoration(
    color: AppColors.grey900,
    borderRadius: BorderRadius.circular(24),  // 알약 형태
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.airplanemode_active, color: AppColors.info, size: 20),
      Column(
        children: [
          Text(_getPreviewPrimaryText()),   // "스시 오마카세" or "32,000원"
          Text(_getPreviewSecondaryText()), // "1시간 후" or "64%"
        ],
      ),
    ],
  ),
)

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: const Color(0xFF1C1C1E),  // iOS dark system background
    borderRadius: BorderRadius.circular(16),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 헤더, 일정, 예산 섹션들...
    ],
  ),
)

final showSchedule = _selectedMode != LiveActivityDisplayMode.budget;
final showBudget = _selectedMode != LiveActivityDisplayMode.schedule;

final tripName = widget.trip.name.isNotEmpty ? widget.trip.name : '오사카 여행';
final destination = widget.trip.destination?.isNotEmpty == true
    ? widget.trip.destination!
    : '일본 오사카';

ZStack {
    Circle()
        .stroke(Color.gray.opacity(0.3), lineWidth: 4)
    Circle()
        .trim(from: 0, to: min(CGFloat(state.budgetProgress ?? 0), 1.0))
        .stroke(
            state.isOverBudget ? Color.red : Color.blue,
            style: StrokeStyle(lineWidth: 4, lineCap: .round)
        )
        .rotationEffect(.degrees(-90))
    Text("\(state.budgetProgressPercent)%")
        .font(.caption2)
        .fontWeight(.bold)
}
.frame(width: 44, height: 44)

class _BudgetCirclePainter extends CustomPainter {
  final double progress;

  _BudgetCirclePainter({required this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2 - 2;

    // 배경 원 (회색 트랙)
    canvas.drawCircle(
      center,
      radius,
      Paint()
        ..color = Colors.white12
        ..style = PaintingStyle.stroke
        ..strokeWidth = 3.5,
    );

    // 진행률 호 (12시 방향부터 시계 방향)
    final sweepAngle = 2 * 3.14159 * progress.clamp(0.0, 1.0);
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -3.14159 / 2,   // 시작점: 12시 방향 (-π/2)
      sweepAngle,       // 호 각도: 2π * progress
      false,
      Paint()
        ..color = progress > 1.0 ? Colors.red : const Color(0xFF0A84FF)
        ..style = PaintingStyle.stroke
        ..strokeWidth = 3.5
        ..strokeCap = StrokeCap.round,
    );
  }

  @override
  bool shouldRepaint(_BudgetCirclePainter oldDelegate) =>
      oldDelegate.progress != progress;
}

SizedBox(
  width: 40,
  height: 40,
  child: CustomPaint(
    painter: _BudgetCirclePainter(progress: 0.64),
    child: const Center(
      child: Text(
        '64%',
        style: TextStyle(
          color: Colors.white,
          fontSize: 10,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
)

if (showSchedule) ...[
  Row(
    children: [
      // 주황색 배경의 위치 아이콘
      Container(
        padding: const EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.orange.withValues(alpha: 0.2),
          borderRadius: BorderRadius.circular(6),
        ),
        child: const Icon(Icons.location_on,
            color: Colors.orange, size: 18),
      ),
      const SizedBox(width: 10),
      // 일정 정보
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('다음 일정',
              style: TextStyle(color: Colors.white38, fontSize: 11)),
            Text('스시 오마카세',
              style: TextStyle(color: Colors.white, fontSize: 14,
                fontWeight: FontWeight.w500)),
            Text('도톤보리',
              style: TextStyle(color: Colors.white38, fontSize: 11)),
          ],
        ),
      ),
      // ETA
      Text('1시간 후',
        style: TextStyle(color: Color(0xFF0A84FF), fontSize: 14,
          fontWeight: FontWeight.w600)),
    ],
  ),
]

if (showBudget) ...[
  Row(
    children: [
      Container(
        padding: const EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.green.withValues(alpha: 0.2),
          borderRadius: BorderRadius.circular(6),
        ),
        child: const Icon(Icons.credit_card,
            color: Colors.green, size: 18),
      ),
      const SizedBox(width: 10),
      Expanded(/* 오늘 지출 */),
      Column(/* 일일 예산 */),
    ],
  ),
  // 진행률 바
  ClipRRect(
    borderRadius: BorderRadius.circular(2),
    child: LinearProgressIndicator(
      value: 0.64,
      backgroundColor: Colors.white12,
      valueColor: const AlwaysStoppedAnimation<Color>(Color(0xFF0A84FF)),
      minHeight: 4,
    ),
  ),
  // 최근 지출
  Text('최근: 라멘 · 1,200엔',
    style: TextStyle(color: Colors.white38, fontSize: 11)),
]

Future<void> _selectMode(LiveActivityDisplayMode mode) async {
  if (_selectedMode == mode) return;

  setState(() {
    _selectedMode = mode;  // 이 변경이 미리보기를 다시 그린다
    _isUpdating = true;
  });

  // 서버 업데이트 + 로컬 Live Activity 업데이트...
}

struct TripActivityAttributes: ActivityAttributes {
    struct ContentState: Codable, Hashable {
        var displayMode: String?  // "auto" | "schedule" | "budget" | "combined"
        var tripName: String
        var nextScheduleName: String?
        var todaySpent: String
        var budgetProgress: Double?
        // ...
    }
}

extension TripActivityAttributes.ContentState {
    var displayModeEnum: DisplayMode {
        switch displayMode {
        case "schedule": return .schedule
        case "budget": return .budget
        case "combined": return .combined
        default: return .auto
        }
    }
}

enum LiveActivityDisplayMode {
  auto, schedule, budget, combined;

  String get value => name;
  String get displayName => switch (this) {
    auto => '자동',
    schedule => '일정 중심',
    budget => '예산 중심',
    combined => '결합',
  };
}

@override
bool shouldRepaint(_BudgetCirclePainter oldDelegate) =>
    oldDelegate.progress != progress;