julian/superport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: UI 일관성 개선 및 테이블 구조 통일

Browse Source 
장비관리 화면을 기준으로 전체 화면 UI 일관성 개선:

- 모든 화면 검색바/버튼/드롭다운 높이 40px 통일
- 테이블 헤더 패딩 vertical 10px, 행 패딩 vertical 4px 통일
- 배지 스타일 통일 (border 제거, opacity 0.9 적용)
- 페이지네이션 10개 이하에서도 항상 표시
- 테이블 헤더 폰트 스타일 통일 (fontSize: 13, fontWeight: w500)

각 화면별 수정사항:
1. 장비관리: 컬럼 너비 최적화, 검색 컴포넌트 높이 명시
2. 입고지 관리: 페이지네이션 조건 개선
3. 회사관리: UnifiedSearchBar 통합, 배지 스타일 개선
4. 유지보수: ListView.builder → map() 변경, 테이블 구조 재설계

키포인트 색상을 teal로 통일하여 브랜드 일관성 확보
This commit is contained in:
JiWoong Sul
2025-08-08 18:03:07 +09:00
parent 844c7bd92f
commit b8f10dd588
17 changed files with 2065 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
lib/screens/common/widgets/pagination.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
/// 페이지네이션 위젯 (<< < 1 2 3 ... 10 > >>)
/// - totalCount: 전체 아이템 수
@@ -33,56 +34,105 @@ class Pagination extends StatelessWidget {
for (int i = startPage; i <= endPage; i++) {
pageButtons.add(
Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: const Size(36, 36),
backgroundColor: i == currentPage ? Colors.blue : Colors.white,
foregroundColor: i == currentPage ? Colors.white : Colors.black,
padding: EdgeInsets.zero,
padding: const EdgeInsets.symmetric(horizontal: 4),
child: InkWell(
onTap: i == currentPage ? null : () => onPageChanged(i),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
child: Container(
height: 32,
constraints: const BoxConstraints(minWidth: 32),
padding: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: i == currentPage ? ShadcnTheme.primary : Colors.transparent,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(
color: i == currentPage ? ShadcnTheme.primary : Colors.black,
),
),
alignment: Alignment.center,
child: Text(
'$i',
style: ShadcnTheme.labelMedium.copyWith(
color: i == currentPage
? ShadcnTheme.primaryForeground
: ShadcnTheme.foreground,
),
),
),
onPressed: i == currentPage ? null : () => onPageChanged(i),
child: Text('$i'),
),
),
);
}
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 가장 처음 페이지로 이동
IconButton(
icon: const Icon(Icons.first_page),
tooltip: '처음',
onPressed: currentPage > 1 ? () => onPageChanged(1) : null,
return Container(
padding: const EdgeInsets.symmetric(vertical: ShadcnTheme.spacing4),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 가장 처음 페이지로 이동
_buildNavigationButton(
icon: Icons.first_page,
tooltip: '처음',
onPressed: currentPage > 1 ? () => onPageChanged(1) : null,
),
const SizedBox(width: 4),
// 이전 페이지로 이동
_buildNavigationButton(
icon: Icons.chevron_left,
tooltip: '이전',
onPressed: currentPage > 1 ? () => onPageChanged(currentPage - 1) : null,
),
const SizedBox(width: 8),
// 페이지 번호 버튼들
...pageButtons,
const SizedBox(width: 8),
// 다음 페이지로 이동
_buildNavigationButton(
icon: Icons.chevron_right,
tooltip: '다음',
onPressed: currentPage < totalPages
? () => onPageChanged(currentPage + 1)
: null,
),
const SizedBox(width: 4),
// 마짉 페이지로 이동
_buildNavigationButton(
icon: Icons.last_page,
tooltip: '마짉',
onPressed: currentPage < totalPages ? () => onPageChanged(totalPages) : null,
),
],
),
);
}
Widget _buildNavigationButton({
required IconData icon,
required String tooltip,
VoidCallback? onPressed,
}) {
final isDisabled = onPressed == null;
return Tooltip(
message: tooltip,
child: InkWell(
onTap: onPressed,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
child: Container(
height: 32,
width: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(
color: isDisabled ? ShadcnTheme.muted : Colors.black,
),
),
child: Icon(
icon,
size: 18,
color: isDisabled ? ShadcnTheme.mutedForeground : ShadcnTheme.foreground,
),
),
// 이전 페이지로 이동
IconButton(
icon: const Icon(Icons.chevron_left),
tooltip: '이전',
onPressed:
currentPage > 1 ? () => onPageChanged(currentPage - 1) : null,
),
// 페이지 번호 버튼들
...pageButtons,
// 다음 페이지로 이동
IconButton(
icon: const Icon(Icons.chevron_right),
tooltip: '다음',
onPressed:
currentPage < totalPages
? () => onPageChanged(currentPage + 1)
: null,
),
// 마지막 페이지로 이동
IconButton(
icon: const Icon(Icons.last_page),
tooltip: '마지막',
onPressed:
currentPage < totalPages ? () => onPageChanged(totalPages) : null,
),
],
),
);
}
}

235
lib/screens/common/widgets/standard_action_bar.dart Normal file
View File

@@ -0,0 +1,235 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
/// 표준 액션바 위젯
///
/// 모든 리스트 화면에서 일관된 액션 버튼 배치와 상태 표시 제공
class StandardActionBar extends StatelessWidget {
final List<Widget> leftActions; // 왼쪽 액션 버튼들
final List<Widget> rightActions; // 오른쪽 액션 버튼들
final int? selectedCount; // 선택된 항목 수
final int totalCount; // 전체 항목 수
final VoidCallback? onRefresh; // 새로고침 콜백
final String? statusMessage; // 추가 상태 메시지
const StandardActionBar({
Key? key,
this.leftActions = const [],
this.rightActions = const [],
this.selectedCount,
required this.totalCount,
this.onRefresh,
this.statusMessage,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 왼쪽 액션 버튼들
Row(
children: [
...leftActions.map((action) => Padding(
padding: const EdgeInsets.only(right: ShadcnTheme.spacing2),
child: action,
)),
],
),
// 오른쪽 상태 표시 및 액션들
Row(
children: [
// 추가 상태 메시지
if (statusMessage != null) ...[
Text(statusMessage!, style: ShadcnTheme.bodyMuted),
const SizedBox(width: ShadcnTheme.spacing3),
],
// 선택된 항목 수 표시
if (selectedCount != null && selectedCount! > 0) ...[
Container(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
decoration: BoxDecoration(
color: ShadcnTheme.primary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusSm),
border: Border.all(color: ShadcnTheme.primary.withValues(alpha: 0.3)),
),
child: Text(
'$selectedCount개 선택됨',
style: TextStyle(
fontWeight: FontWeight.bold,
color: ShadcnTheme.primary,
),
),
),
const SizedBox(width: ShadcnTheme.spacing3),
],
// 전체 항목 수 표시
Container(
padding: const EdgeInsets.symmetric(
vertical: 6,
horizontal: 12,
),
decoration: BoxDecoration(
color: ShadcnTheme.muted.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusSm),
),
child: Text(
'총 $totalCount개',
style: ShadcnTheme.bodySmall,
),
),
// 새로고침 버튼
if (onRefresh != null) ...[
const SizedBox(width: ShadcnTheme.spacing3),
IconButton(
icon: const Icon(Icons.refresh),
onPressed: onRefresh,
tooltip: '새로고침',
iconSize: 20,
),
],
// 오른쪽 액션 버튼들
...rightActions.map((action) => Padding(
padding: const EdgeInsets.only(left: ShadcnTheme.spacing2),
child: action,
)),
],
),
],
);
}
}
/// 표준 액션 버튼 그룹
class StandardActionButtons {
/// 추가 버튼
static Widget addButton({
required String text,
required VoidCallback onPressed,
IconData icon = Icons.add,
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: Icon(icon, size: 16),
);
}
/// 삭제 버튼
static Widget deleteButton({
required VoidCallback? onPressed,
bool enabled = true,
String text = '삭제',
}) {
return ShadcnButton(
text: text,
onPressed: enabled ? onPressed : null,
variant: enabled
? ShadcnButtonVariant.destructive
: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.delete, size: 16),
);
}
/// 엑셀 내보내기 버튼
static Widget exportButton({
required VoidCallback onPressed,
String text = '엑셀 내보내기',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.download, size: 16),
);
}
/// 엑셀 가져오기 버튼
static Widget importButton({
required VoidCallback onPressed,
String text = '엑셀 가져오기',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.upload, size: 16),
);
}
/// 새로고침 버튼
static Widget refreshButton({
required VoidCallback onPressed,
String text = '새로고침',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.secondary,
icon: const Icon(Icons.refresh, size: 16),
);
}
/// 필터 초기화 버튼
static Widget clearFiltersButton({
required VoidCallback onPressed,
String text = '필터 초기화',
}) {
return ShadcnButton(
text: text,
onPressed: onPressed,
variant: ShadcnButtonVariant.ghost,
icon: const Icon(Icons.clear_all, size: 16),
);
}
}
/// 표준 필터 드롭다운
class StandardFilterDropdown<T> extends StatelessWidget {
final T value;
final List<DropdownMenuItem<T>> items;
final ValueChanged<T?> onChanged;
final String? hint;
const StandardFilterDropdown({
Key? key,
required this.value,
required this.items,
required this.onChanged,
this.hint,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 40,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: ShadcnTheme.card,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<T>(
value: value,
items: items,
onChanged: onChanged,
hint: hint != null ? Text(hint!) : null,
style: ShadcnTheme.bodySmall,
icon: const Icon(Icons.arrow_drop_down, size: 20),
),
),
);
}
}

315
lib/screens/common/widgets/standard_data_table.dart Normal file
View File

@@ -0,0 +1,315 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
/// 표준 데이터 테이블 컬럼 정의
class DataColumn {
final String label;
final double? width;
final int? flex;
final bool isNumeric;
final TextAlign textAlign;
DataColumn({
required this.label,
this.width,
this.flex,
this.isNumeric = false,
TextAlign? textAlign,
}) : textAlign = textAlign ?? (isNumeric ? TextAlign.right : TextAlign.left);
}
/// 표준 데이터 테이블 위젯
///
/// 모든 리스트 화면에서 일관된 테이블 스타일 제공
class StandardDataTable extends StatelessWidget {
final List<DataColumn> columns;
final List<Widget> rows;
final bool showCheckbox;
final bool? isAllSelected;
final ValueChanged<bool?>? onSelectAll;
final bool enableHorizontalScroll;
final ScrollController? horizontalScrollController;
final Widget? emptyWidget;
final bool applyZebraStripes; // 짝수 행 배경색 적용 여부
const StandardDataTable({
Key? key,
required this.columns,
required this.rows,
this.showCheckbox = false,
this.isAllSelected,
this.onSelectAll,
this.enableHorizontalScroll = false,
this.horizontalScrollController,
this.emptyWidget,
this.applyZebraStripes = true,
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (rows.isEmpty) {
return _buildEmptyState();
}
final table = Container(
width: double.infinity,
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
border: Border.all(color: Colors.black),
boxShadow: ShadcnTheme.cardShadow,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 테이블 헤더
_buildHeader(),
// 테이블 데이터 행들
...rows,
],
),
);
if (enableHorizontalScroll) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: horizontalScrollController,
child: table,
);
}
return table;
}
Widget _buildHeader() {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: 10,
),
decoration: BoxDecoration(
color: ShadcnTheme.muted.withValues(alpha: 0.3),
border: Border(
bottom: BorderSide(color: Colors.black),
),
),
child: Row(
children: [
// 체크박스 컬럼
if (showCheckbox)
SizedBox(
width: 40,
child: Checkbox(
value: isAllSelected,
onChanged: onSelectAll,
tristate: false,
),
),
// 데이터 컬럼들
...columns.map((column) {
Widget child = Text(
column.label,
style: ShadcnTheme.bodyMedium.copyWith(
fontWeight: FontWeight.bold,
),
textAlign: column.textAlign,
);
if (column.width != null) {
return SizedBox(
width: column.width,
child: child,
);
} else if (column.flex != null) {
return Expanded(
flex: column.flex!,
child: child,
);
} else {
return Expanded(child: child);
}
}),
],
),
);
}
Widget _buildEmptyState() {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(ShadcnTheme.spacing8),
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusLg),
border: Border.all(color: Colors.black),
boxShadow: ShadcnTheme.cardShadow,
),
child: emptyWidget ??
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.inbox_outlined,
size: 48,
color: ShadcnTheme.muted,
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
'데이터가 없습니다',
style: ShadcnTheme.bodyMuted,
),
],
),
),
);
}
}
/// 표준 데이터 행 위젯
class StandardDataRow extends StatelessWidget {
final int index;
final List<Widget> cells;
final bool showCheckbox;
final bool? isSelected;
final ValueChanged<bool?>? onSelect;
final bool applyZebraStripes;
final List<DataColumn> columns;
const StandardDataRow({
Key? key,
required this.index,
required this.cells,
this.showCheckbox = false,
this.isSelected,
this.onSelect,
this.applyZebraStripes = true,
required this.columns,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: ShadcnTheme.spacing4,
vertical: 4,
),
decoration: BoxDecoration(
color: applyZebraStripes && index % 2 == 1
? ShadcnTheme.muted.withValues(alpha: 0.1)
: null,
border: Border(
bottom: BorderSide(color: Colors.black),
),
),
child: Row(
children: [
// 체크박스
if (showCheckbox)
SizedBox(
width: 40,
child: Checkbox(
value: isSelected,
onChanged: onSelect,
tristate: false,
),
),
// 데이터 셀들
...cells.asMap().entries.map((entry) {
final cellIndex = entry.key;
final cell = entry.value;
if (cellIndex >= columns.length) return const SizedBox.shrink();
final column = columns[cellIndex];
if (column.width != null) {
return SizedBox(
width: column.width,
child: cell,
);
} else if (column.flex != null) {
return Expanded(
flex: column.flex!,
child: cell,
);
} else {
return Expanded(child: cell);
}
}),
],
),
);
}
}
/// 표준 관리 버튼 세트
class StandardActionButtons extends StatelessWidget {
final VoidCallback? onView;
final VoidCallback? onEdit;
final VoidCallback? onDelete;
final List<Widget>? customButtons;
final double buttonSize;
const StandardActionButtons({
Key? key,
this.onView,
this.onEdit,
this.onDelete,
this.customButtons,
this.buttonSize = 32,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
if (onView != null)
_buildIconButton(
Icons.visibility_outlined,
onView!,
'보기',
ShadcnTheme.primary,
),
if (onEdit != null)
_buildIconButton(
Icons.edit_outlined,
onEdit!,
'수정',
ShadcnTheme.primary,
),
if (onDelete != null)
_buildIconButton(
Icons.delete_outline,
onDelete!,
'삭제',
ShadcnTheme.destructive,
),
if (customButtons != null) ...customButtons!,
],
);
}
Widget _buildIconButton(
IconData icon,
VoidCallback onPressed,
String tooltip,
Color color,
) {
return IconButton(
constraints: BoxConstraints(
minWidth: buttonSize,
minHeight: buttonSize,
maxWidth: buttonSize,
maxHeight: buttonSize,
),
padding: const EdgeInsets.all(4),
icon: Icon(icon, size: 16, color: color),
onPressed: onPressed,
tooltip: tooltip,
);
}
}

297
lib/screens/common/widgets/standard_states.dart Normal file
View File

@@ -0,0 +1,297 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
/// 표준 로딩 상태 위젯
class StandardLoadingState extends StatelessWidget {
final String message;
const StandardLoadingState({
Key? key,
this.message = '데이터를 불러오는 중...',
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(
color: ShadcnTheme.primary,
strokeWidth: 3,
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
message,
style: ShadcnTheme.bodyMuted,
),
],
),
);
}
}
/// 표준 에러 상태 위젯
class StandardErrorState extends StatelessWidget {
final String title;
final String? message;
final VoidCallback? onRetry;
final IconData icon;
const StandardErrorState({
Key? key,
this.title = '오류가 발생했습니다',
this.message,
this.onRetry,
this.icon = Icons.error_outline,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing6),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: 64,
color: ShadcnTheme.destructive.withValues(alpha: 0.8),
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
title,
style: ShadcnTheme.headingH4,
textAlign: TextAlign.center,
),
if (message != null) ...[
const SizedBox(height: ShadcnTheme.spacing2),
Text(
message!,
style: ShadcnTheme.bodyMuted,
textAlign: TextAlign.center,
),
],
if (onRetry != null) ...[
const SizedBox(height: ShadcnTheme.spacing6),
ShadcnButton(
text: '다시 시도',
onPressed: onRetry,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: const Icon(Icons.refresh, size: 16),
),
],
],
),
),
);
}
}
/// 표준 빈 상태 위젯
class StandardEmptyState extends StatelessWidget {
final String title;
final String? message;
final Widget? action;
final IconData icon;
const StandardEmptyState({
Key? key,
this.title = '데이터가 없습니다',
this.message,
this.action,
this.icon = Icons.inbox_outlined,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: 64,
color: ShadcnTheme.mutedForeground.withValues(alpha: 0.5),
),
const SizedBox(height: ShadcnTheme.spacing4),
Text(
title,
style: ShadcnTheme.headingH4.copyWith(
color: ShadcnTheme.mutedForeground,
),
textAlign: TextAlign.center,
),
if (message != null) ...[
const SizedBox(height: ShadcnTheme.spacing2),
Text(
message!,
style: ShadcnTheme.bodyMuted,
textAlign: TextAlign.center,
),
],
if (action != null) ...[
const SizedBox(height: ShadcnTheme.spacing6),
action!,
],
],
),
),
);
}
}
/// 표준 정보 메시지 위젯
class StandardInfoMessage extends StatelessWidget {
final String message;
final IconData icon;
final Color? color;
final VoidCallback? onClose;
const StandardInfoMessage({
Key? key,
required this.message,
this.icon = Icons.info_outline,
this.color,
this.onClose,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final displayColor = color ?? ShadcnTheme.primary;
return Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing3),
decoration: BoxDecoration(
color: displayColor.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(
color: displayColor.withValues(alpha: 0.3),
),
),
child: Row(
children: [
Icon(
icon,
size: 20,
color: displayColor,
),
const SizedBox(width: ShadcnTheme.spacing2),
Expanded(
child: Text(
message,
style: TextStyle(
color: displayColor,
fontSize: 14,
),
),
),
if (onClose != null)
IconButton(
icon: Icon(
Icons.close,
size: 16,
color: displayColor,
),
onPressed: onClose,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(
maxHeight: 24,
maxWidth: 24,
),
),
],
),
);
}
}
/// 표준 통계 카드 위젯
class StandardStatCard extends StatelessWidget {
final String title;
final String value;
final IconData icon;
final Color color;
final String? subtitle;
const StandardStatCard({
Key? key,
required this.title,
required this.value,
required this.icon,
required this.color,
this.subtitle,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(ShadcnTheme.spacing5),
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: Colors.black),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(ShadcnTheme.radiusSm),
),
child: Icon(
icon,
size: 20,
color: color,
),
),
const SizedBox(width: ShadcnTheme.spacing3),
Expanded(
child: Text(
title,
style: ShadcnTheme.bodySmall.copyWith(
color: ShadcnTheme.mutedForeground,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: ShadcnTheme.spacing3),
Text(
value,
style: ShadcnTheme.headingH3.copyWith(
color: color,
fontWeight: FontWeight.bold,
),
),
if (subtitle != null) ...[
const SizedBox(height: ShadcnTheme.spacing1),
Text(
subtitle!,
style: ShadcnTheme.bodySmall.copyWith(
color: ShadcnTheme.mutedForeground,
),
),
],
],
),
);
}
}

109
lib/screens/common/widgets/unified_search_bar.dart Normal file
View File

@@ -0,0 +1,109 @@
import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_shadcn.dart';
import 'package:superport/screens/common/components/shadcn_components.dart';
/// 통일된 검색바 위젯
///
/// 모든 리스트 화면에서 동일한 스타일과 동작을 보장
class UnifiedSearchBar extends StatelessWidget {
final TextEditingController controller;
final String placeholder;
final VoidCallback onSearch;
final ValueChanged<String>? onChanged; // 실시간 검색을 위한 콜백
final VoidCallback? onClear;
final Widget? suffixButton; // 검색 버튼 외 추가 버튼
final List<Widget>? filters; // 필터 위젯들
final bool showSearchButton;
const UnifiedSearchBar({
Key? key,
required this.controller,
this.placeholder = '검색어를 입력하세요...',
required this.onSearch,
this.onChanged,
this.onClear,
this.suffixButton,
this.filters,
this.showSearchButton = true,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
children: [
// 검색 입력 필드
Expanded(
child: Container(
height: 40,
decoration: BoxDecoration(
color: ShadcnTheme.card,
borderRadius: BorderRadius.circular(ShadcnTheme.radiusMd),
border: Border.all(color: Colors.black),
),
child: TextField(
controller: controller,
onChanged: onChanged,
onSubmitted: (_) => onSearch(),
decoration: InputDecoration(
hintText: placeholder,
hintStyle: TextStyle(color: ShadcnTheme.muted),
prefixIcon: Icon(Icons.search, color: ShadcnTheme.muted, size: 20),
suffixIcon: controller.text.isNotEmpty && onClear != null
? IconButton(
icon: Icon(Icons.clear, color: ShadcnTheme.muted, size: 18),
onPressed: () {
controller.clear();
onClear!();
},
padding: EdgeInsets.zero,
constraints: const BoxConstraints(maxHeight: 40, maxWidth: 40),
)
: null,
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
),
),
),
// 검색 버튼
if (showSearchButton) ...[
const SizedBox(width: ShadcnTheme.spacing2),
SizedBox(
height: 40,
child: ShadcnButton(
text: '검색',
onPressed: onSearch,
variant: ShadcnButtonVariant.primary,
textColor: Colors.white,
icon: const Icon(Icons.search, size: 16),
),
),
],
// 추가 버튼 (예: 추가, 필터 등)
if (suffixButton != null) ...[
const SizedBox(width: ShadcnTheme.spacing2),
suffixButton!,
],
],
),
// 필터 섹션
if (filters != null && filters!.isNotEmpty) ...[
const SizedBox(height: ShadcnTheme.spacing3),
Row(
children: [
...filters!.map((filter) => Padding(
padding: const EdgeInsets.only(right: ShadcnTheme.spacing2),
child: filter,
)),
],
),
],
],
);
}
}