bcjang/flutter-frame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

초기 커밋

Browse Source
This commit is contained in:
basilro
2026-03-01 07:55:59 +09:00
commit b0262d6bab
67 changed files with 4660 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
lib/features/dashboard/presentation/screens/dashboard_screen.dart Normal file
View File

@@ -0,0 +1,265 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import '../../../../core/utils/extensions.dart';
import '../../../../shared/widgets/chart_widgets/bar_chart_widget.dart';
import '../../../../shared/widgets/chart_widgets/pie_chart_widget.dart';
import '../widgets/monitoring_panel.dart';
import '../widgets/realtime_chart.dart';
import '../widgets/stats_card.dart';
class DashboardScreen extends StatelessWidget {
const DashboardScreen({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'대시보드',
style: context.textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const Gap(8),
Text(
'실시간 데이터와 시스템 현황을 모니터링하세요',
style: context.textTheme.bodyLarge?.copyWith(
color: context.colorScheme.onSurfaceVariant,
),
),
const Gap(24),
// 통계 카드
LayoutBuilder(
builder: (context, constraints) {
final crossAxisCount = context.isDesktop
? 4
: context.isTablet
? 2
: 1;
return GridView.count(
crossAxisCount: crossAxisCount,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
mainAxisSpacing: 16,
crossAxisSpacing: 16,
childAspectRatio: 1.8,
children: const [
StatsCard(
title: '총 사용자',
value: '1,234',
icon: Icons.people,
iconColor: Colors.blue,
change: '+12%',
isPositive: true,
subtitle: '전월 대비',
),
StatsCard(
title: '활성 세션',
value: '89',
icon: Icons.devices,
iconColor: Colors.green,
change: '+5',
isPositive: true,
subtitle: '현재 접속',
),
StatsCard(
title: '요청 수',
value: '24.5K',
icon: Icons.trending_up,
iconColor: Colors.orange,
change: '+18%',
isPositive: true,
subtitle: '오늘',
),
StatsCard(
title: '평균 응답시간',
value: '142ms',
icon: Icons.speed,
iconColor: Colors.purple,
change: '-8ms',
isPositive: true,
subtitle: '지난 1시간',
),
],
);
},
),
const Gap(24),
// 실시간 차트 + 모니터링 패널
LayoutBuilder(
builder: (context, constraints) {
if (context.isDesktop) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Expanded(
flex: 2,
child: SizedBox(
height: 350,
child: RealtimeChart(
title: '실시간 트래픽',
),
),
),
const Gap(16),
const Expanded(
child: MonitoringPanel(),
),
],
);
}
return Column(
children: const [
SizedBox(
height: 350,
child: RealtimeChart(
title: '실시간 트래픽',
),
),
Gap(16),
MonitoringPanel(),
],
);
},
),
const Gap(24),
// 바 차트 + 파이 차트
LayoutBuilder(
builder: (context, constraints) {
final charts = [
SizedBox(
height: 300,
child: Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: BarChartWidget(
title: '일별 API 요청',
maxY: 100,
barGroups: List.generate(
7,
(i) => BarChartGroupData(
x: i,
barRods: [
BarChartRodData(
toY: [30, 45, 60, 38, 72, 55, 40][i]
.toDouble(),
color:
context.colorScheme.primary,
width: 16,
borderRadius:
const BorderRadius.vertical(
top: Radius.circular(4),
),
),
],
),
),
bottomTitles: (value, meta) => SideTitleWidget(
meta: meta,
child: Text(
['월', '화', '수', '목', '금', '토', '일']
[value.toInt() % 7],
style: Theme.of(context).textTheme.bodySmall,
),
),
),
),
),
),
SizedBox(
height: 300,
child: Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: PieChartWidget(
title: '사용자 분포',
sections: [
PieChartSectionData(
value: 45,
color: Colors.blue,
title: '45%',
radius: 50,
titleStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
PieChartSectionData(
value: 30,
color: Colors.green,
title: '30%',
radius: 50,
titleStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
PieChartSectionData(
value: 15,
color: Colors.orange,
title: '15%',
radius: 50,
titleStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
PieChartSectionData(
value: 10,
color: Colors.purple,
title: '10%',
radius: 50,
titleStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
],
legendItems: const [
LegendItem(label: '웹', color: Colors.blue),
LegendItem(label: 'Android', color: Colors.green),
LegendItem(label: 'iOS', color: Colors.orange),
LegendItem(label: '기타', color: Colors.purple),
],
),
),
),
),
];
if (context.isDesktop) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: charts[0]),
const Gap(16),
Expanded(child: charts[1]),
],
);
}
return Column(
children: [
charts[0],
const Gap(16),
charts[1],
],
);
},
),
],
),
);
}
}

187
lib/features/dashboard/presentation/widgets/monitoring_panel.dart Normal file
View File

@@ -0,0 +1,187 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
class MonitoringPanel extends StatelessWidget {
const MonitoringPanel({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'시스템 모니터링',
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const Gap(16),
_MonitoringItem(
label: 'CPU 사용률',
value: 0.45,
displayValue: '45%',
color: Colors.blue,
),
const Gap(12),
_MonitoringItem(
label: '메모리 사용률',
value: 0.62,
displayValue: '62%',
color: Colors.orange,
),
const Gap(12),
_MonitoringItem(
label: '디스크 사용률',
value: 0.35,
displayValue: '35%',
color: Colors.green,
),
const Gap(12),
_MonitoringItem(
label: '네트워크 I/O',
value: 0.78,
displayValue: '78 Mbps',
color: Colors.purple,
),
const Gap(16),
const Divider(),
const Gap(12),
// 서비스 상태
Text(
'서비스 상태',
style: theme.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
),
),
const Gap(12),
const _ServiceStatus(
name: 'API 서버',
status: ServiceState.running,
),
const _ServiceStatus(
name: 'WebSocket',
status: ServiceState.running,
),
const _ServiceStatus(
name: '데이터베이스',
status: ServiceState.running,
),
const _ServiceStatus(
name: '캐시 서버',
status: ServiceState.warning,
),
],
),
),
);
}
}
class _MonitoringItem extends StatelessWidget {
const _MonitoringItem({
required this.label,
required this.value,
required this.displayValue,
required this.color,
});
final String label;
final double value;
final String displayValue;
final Color color;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(label, style: theme.textTheme.bodyMedium),
Text(
displayValue,
style: theme.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w600,
),
),
],
),
const Gap(6),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: LinearProgressIndicator(
value: value,
backgroundColor: color.withValues(alpha: 0.1),
valueColor: AlwaysStoppedAnimation(color),
minHeight: 8,
),
),
],
);
}
}
enum ServiceState { running, stopped, warning }
class _ServiceStatus extends StatelessWidget {
const _ServiceStatus({
required this.name,
required this.status,
});
final String name;
final ServiceState status;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final (color, label) = switch (status) {
ServiceState.running => (Colors.green, '정상'),
ServiceState.stopped => (Colors.red, '중지'),
ServiceState.warning => (Colors.orange, '경고'),
};
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Row(
children: [
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
),
),
const Gap(10),
Expanded(
child: Text(name, style: theme.textTheme.bodyMedium),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
),
child: Text(
label,
style: theme.textTheme.bodySmall?.copyWith(
color: color,
fontWeight: FontWeight.w600,
),
),
),
],
),
);
}
}

182
lib/features/dashboard/presentation/widgets/realtime_chart.dart Normal file
View File

@@ -0,0 +1,182 @@
import 'dart:async';
import 'dart:math';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
class RealtimeChart extends StatefulWidget {
const RealtimeChart({
this.title = '실시간 데이터',
this.dataStream,
this.maxDataPoints = 30,
this.lineColor,
super.key,
});
final String title;
final Stream<double>? dataStream;
final int maxDataPoints;
final Color? lineColor;
@override
State<RealtimeChart> createState() => _RealtimeChartState();
}
class _RealtimeChartState extends State<RealtimeChart> {
final List<FlSpot> _spots = [];
StreamSubscription<double>? _subscription;
Timer? _mockTimer;
int _index = 0;
final _random = Random();
@override
void initState() {
super.initState();
if (widget.dataStream != null) {
_subscription = widget.dataStream!.listen(_addDataPoint);
} else {
// Mock 데이터 생성 (WebSocket 미연결 시)
_mockTimer = Timer.periodic(const Duration(seconds: 1), (_) {
_addDataPoint(50 + _random.nextDouble() * 50);
});
}
}
void _addDataPoint(double value) {
setState(() {
_spots.add(FlSpot(_index.toDouble(), value));
if (_spots.length > widget.maxDataPoints) {
_spots.removeAt(0);
}
_index++;
});
}
@override
void dispose() {
_subscription?.cancel();
_mockTimer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final color = widget.lineColor ?? theme.colorScheme.primary;
return Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.title,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: Colors.green.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
),
const Gap(4),
Text(
'LIVE',
style: theme.textTheme.bodySmall?.copyWith(
color: Colors.green,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
const Gap(16),
Expanded(
child: _spots.length < 2
? const Center(child: CircularProgressIndicator())
: LineChart(
LineChartData(
gridData: FlGridData(
show: true,
drawVerticalLine: false,
horizontalInterval: 25,
getDrawingHorizontalLine: (value) => FlLine(
color: theme.colorScheme.outlineVariant
.withValues(alpha: 0.3),
strokeWidth: 1,
),
),
titlesData: const FlTitlesData(
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 40,
),
),
),
borderData: FlBorderData(show: false),
minY: 0,
maxY: 100,
lineBarsData: [
LineChartBarData(
spots: _spots,
isCurved: true,
color: color,
barWidth: 2,
isStrokeCapRound: true,
dotData: const FlDotData(show: false),
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
colors: [
color.withValues(alpha: 0.3),
color.withValues(alpha: 0.0),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
],
),
duration: const Duration(milliseconds: 150),
),
),
],
),
),
);
}
}

105
lib/features/dashboard/presentation/widgets/stats_card.dart Normal file
View File

@@ -0,0 +1,105 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
class StatsCard extends StatelessWidget {
const StatsCard({
required this.title,
required this.value,
this.icon,
this.iconColor,
this.change,
this.isPositive,
this.subtitle,
super.key,
});
final String title;
final String value;
final IconData? icon;
final Color? iconColor;
final String? change;
final bool? isPositive;
final String? subtitle;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
title,
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
overflow: TextOverflow.ellipsis,
),
),
if (icon != null)
Icon(
icon,
color: iconColor ?? theme.colorScheme.primary,
size: 24,
),
],
),
const Gap(8),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
value,
style: theme.textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
if (change != null) ...[
const Gap(8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
decoration: BoxDecoration(
color: (isPositive ?? true)
? Colors.green.withValues(alpha: 0.1)
: Colors.red.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
),
child: Text(
change!,
style: theme.textTheme.bodySmall?.copyWith(
color: (isPositive ?? true)
? Colors.green
: Colors.red,
fontWeight: FontWeight.w600,
),
),
),
],
],
),
if (subtitle != null) ...[
const Gap(4),
Text(
subtitle!,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
],
],
),
),
);
}
}