flutter_ui_kit_notice 0.0.9

Premium Glassmorphism Notice Board UI Kit for Flutter. Reusable forum and community components.

flutter_ui_kit_notice

Premium Glassmorphism Notice Board UI Kit for Flutter.

포럼, 커뮤니티, 공지 게시판에 바로 사용할 수 있는 재사용 가능한 위젯 모음입니다. 모든 디자인 토큰은 flutter_ui_kit_theme에서 가져오며, 하드코딩된 색상·여백·폰트 크기는 없습니다.

---

컴포넌트 목록

컴포넌트	설명
GlassCard	Glassmorphism 기반 범용 카드 컨테이너
GlassTag	카테고리 / 상태 표시용 pill 배지
BoardList	NoticePost 목록을 렌더링하는 스크롤 리스트
BoardItem	게시글 한 줄 카드 (제목, 작성자, 날짜, 조회수, 댓글 수)
PostView	게시글 상세 뷰 (헤더 + 본문 + 댓글 목록)
CommentWidget	댓글 한 줄 카드 (아바타, 작성자, 내용)

---

설치

pubspec.yaml에 추가:

dependencies:
  flutter_ui_kit_notice: any
  flutter_ui_kit_theme: any    # 디자인 토큰 필수
  flutter_ui_kit_l10n: any     # 다국어 지원 시 추가 (없으면 영어로 동작)

---

빠른 시작

1. 테마 설정

flutter_ui_kit_theme의 DarkTheme 또는 LightTheme을 앱에 적용합니다.

import 'package:flutter_ui_kit_theme/flutter_ui_kit_theme.dart';

MaterialApp(
  theme: LightTheme.build(),
  darkTheme: DarkTheme.build(),
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

2. 게시글 목록 화면

import 'package:flutter_ui_kit_notice/flutter_ui_kit_notice.dart';

final posts = [
  NoticePost(
    id: '1',
    title: '서비스 점검 안내 (3/15 02:00 ~ 04:00)',
    author: '운영자',
    createdAt: DateTime.now().subtract(const Duration(hours: 2)),
    category: '공지',
    isPinned: true,
    viewCount: 1240,
    commentCount: 3,
  ),
  NoticePost(
    id: '2',
    title: '3월 이벤트 참여 방법 안내',
    author: '마케팅팀',
    createdAt: DateTime.now().subtract(const Duration(minutes: 30)),
    category: '이벤트',
    isNew: true,
    viewCount: 430,
    commentCount: 12,
  ),
];

BoardList(
  posts: posts,
  animateItems: true,
  onTapPost: (post) {
    // 상세 페이지로 이동
  },
)

3. 게시글 상세 화면

final comments = [
  NoticeComment(
    id: 'c1',
    author: '홍길동',
    body: '유익한 정보 감사합니다!',
    createdAt: DateTime.now().subtract(const Duration(minutes: 10)),
  ),
];

PostView(
  post: selectedPost,
  comments: comments,
)

4. 개별 컴포넌트 직접 사용

// GlassCard — 커스텀 콘텐츠를 감싸는 glassmorphism 카드
GlassCard(
  onTap: () {},
  child: Text('내용'),
)

// GlassTag — 카테고리 / 상태 배지
Row(
  children: [
    GlassTag(label: '공지'),
    GlassTag(label: 'NEW', color: Theme.of(context).colorScheme.error),
  ],
)

// CommentWidget — 단독 댓글 렌더링
CommentWidget(comment: noticeComment)

---

모델

NoticePost

필드	타입	설명
id	String	고유 식별자
title	String	게시글 제목
author	String	작성자 이름
createdAt	DateTime	작성 시각
category	String?	카테고리 레이블 (예: '공지', '이벤트')
body	String?	본문 (상세 뷰에서 사용)
viewCount	int	조회 수
commentCount	int	댓글 수
isPinned	bool	상단 고정 여부
isNew	bool	NEW 배지 표시 여부

NoticeComment

필드	타입	설명
id	String	고유 식별자
author	String	작성자 이름
body	String	댓글 내용
createdAt	DateTime	작성 시각

---

커스터마이징

댓글 커스텀 빌더

PostView의 commentBuilder로 댓글 위젯을 완전히 교체할 수 있습니다.

PostView(
  post: post,
  comments: comments,
  commentBuilder: (comment) => MyCustomCommentCard(comment: comment),
)

GlassCard 블러 강도 조정

GlassCard(
  blur: 10.0,   // 기본값 20.0
  child: ...,
)

BoardList 빈 상태 위젯 교체

BoardList(
  posts: const [],
  emptyWidget: const Center(child: Text('작성된 게시글이 없습니다.')),
)

---

다국어 지원 (l10n)

flutter_ui_kit_l10n 패키지와 연동하여 BoardItem, PostView의 UI 문자열을 다국어로 표시합니다.

지원 언어: en / ko / ja

기본 동작 (설정 없음 → 영어)

별도 설정 없이 사용하면 자동으로 영어가 적용됩니다.

// l10n 설정 없이 그냥 사용 — 영어로 표시됨
MaterialApp(
  home: BoardList(posts: posts),
)

앱 언어 전환 연동

UiKitLocalizations.delegate를 등록하면 앱 locale 변경 시 notice 위젯도 자동으로 반영됩니다.

import 'package:flutter_ui_kit_l10n/flutter_ui_kit_l10n.dart';

MaterialApp(
  localizationsDelegates: UiKitLocalizations.localizationsDelegates,
  supportedLocales: UiKitLocalizations.supportedLocales,
  locale: _currentLocale,   // 언어 스위처로 변경하면 notice 위젯도 자동 반영
  home: BoardList(posts: posts),
)

다국어 적용 문자열

위젯	문자열	en	ko	ja
BoardItem, PostView	고정 게시글 태그	Notice	공지	お知らせ
PostView	댓글 수	N Comments	댓글 N	コメント N件
BoardItem	상대 시간 (분)	N minutes ago	N분 전	N分前
BoardItem	상대 시간 (시간)	N hours ago	N시간 전	N時間前

---

디자인 규칙

• 다크 모드 기본 — 모든 컴포넌트는 dark surface에서 최적 표시되도록 설계
• Glassmorphism — BackdropFilter + 반투명 배경 + 소프트 보더
• 토큰 사용 의무 — AppSpacing, AppRadius, colorScheme, textTheme 으로만 스타일링
• 애니메이션 옵트인 — animate: true 파라미터로 FadeIn 전환 활성화

---

패키지 구조

lib/
  flutter_ui_kit_notice.dart        # 공개 barrel
  src/
    models/
      notice_post.dart
      notice_comment.dart
    components/
      glass_card/glass_card.dart
      glass_tag/glass_tag.dart
      board_item/board_item.dart
      board_list/board_list.dart
      comment_widget/comment_widget.dart
      post_view/post_view.dart