feat: home page
This commit is contained in:
efrilm
@@ -0,0 +1,281 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../components/spacer/spacer.dart';
|
||||
|
||||
class HomePerformance extends StatelessWidget {
|
||||
const HomePerformance({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 24,
|
||||
horizontal: AppValue.padding,
|
||||
).copyWith(bottom: 0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Performa Minggu Ini',
|
||||
style: AppStyle.h6.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.textPrimary,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.success.withOpacity(0.1),
|
||||
AppColor.success.withOpacity(0.05),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: AppColor.success.withOpacity(0.2),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.arrow_upward_rounded,
|
||||
color: AppColor.success,
|
||||
size: 14,
|
||||
),
|
||||
const SpaceWidth(4),
|
||||
Text(
|
||||
'89%',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.success,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(20),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: AppColor.border.withOpacity(0.5)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.04),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
_buildPerformanceBar(
|
||||
'Sen',
|
||||
0.8,
|
||||
AppColor.primary,
|
||||
'Rp 2.1M',
|
||||
),
|
||||
_buildPerformanceBar(
|
||||
'Sel',
|
||||
0.6,
|
||||
AppColor.primary,
|
||||
'Rp 1.8M',
|
||||
),
|
||||
_buildPerformanceBar(
|
||||
'Rab',
|
||||
0.9,
|
||||
AppColor.success,
|
||||
'Rp 2.4M',
|
||||
),
|
||||
_buildPerformanceBar(
|
||||
'Kam',
|
||||
0.7,
|
||||
AppColor.primary,
|
||||
'Rp 1.9M',
|
||||
),
|
||||
_buildPerformanceBar(
|
||||
'Jum',
|
||||
1.0,
|
||||
AppColor.success,
|
||||
'Rp 2.5M',
|
||||
),
|
||||
_buildPerformanceBar(
|
||||
'Sab',
|
||||
0.85,
|
||||
AppColor.success,
|
||||
'Rp 2.2M',
|
||||
),
|
||||
_buildPerformanceBar(
|
||||
'Min',
|
||||
0.4,
|
||||
AppColor.textLight,
|
||||
'Rp 1.2M',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(24),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.primary.withOpacity(0.05),
|
||||
AppColor.primary.withOpacity(0.02),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: AppColor.primary.withOpacity(0.1),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Target Minggu Ini',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Text(
|
||||
'Rp 15.000.000',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
'Tercapai',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
'89%',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColor.success,
|
||||
),
|
||||
),
|
||||
const SpaceWidth(4),
|
||||
Icon(
|
||||
Icons.trending_up_rounded,
|
||||
color: AppColor.success,
|
||||
size: 16,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPerformanceBar(
|
||||
String day,
|
||||
double percentage,
|
||||
Color color,
|
||||
String amount,
|
||||
) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Amount label
|
||||
Text(
|
||||
amount,
|
||||
style: AppStyle.xs.copyWith(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
const SpaceHeight(8),
|
||||
// Performance bar
|
||||
Container(
|
||||
height: 80,
|
||||
width: 12,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: AnimatedContainer(
|
||||
duration: Duration(milliseconds: 800 + (day.hashCode % 400)),
|
||||
curve: Curves.easeOutCubic,
|
||||
height: 80 * percentage,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [color, color.withOpacity(0.7)],
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: color.withOpacity(0.3),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SpaceHeight(12),
|
||||
// Day label
|
||||
Text(
|
||||
day,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user