193 lines
6.5 KiB
Dart
193 lines
6.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../models/drink_type.dart';
|
|
import '../services/flux_service.dart';
|
|
import '../widgets/cozy_wave.dart';
|
|
|
|
class DailyFluxScreen extends StatelessWidget {
|
|
const DailyFluxScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final flux = context.watch<FluxService>();
|
|
|
|
return Scaffold(
|
|
body: Stack(
|
|
children: [
|
|
Positioned(
|
|
top: -50,
|
|
right: -50,
|
|
child: _buildBlob(200, const Color(0xFFE8F5E9)),
|
|
),
|
|
Positioned(
|
|
bottom: 100,
|
|
left: -30,
|
|
child: _buildBlob(150, const Color(0xFFFFF3E0)),
|
|
),
|
|
|
|
SafeArea(
|
|
child: Column(
|
|
children: [
|
|
_buildHeader(flux),
|
|
Expanded(
|
|
child: Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 32),
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
Container(
|
|
width: 280,
|
|
height: 380,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(140),
|
|
border: Border.all(color: Colors.white, width: 8),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: const Color(
|
|
0xFFA1887F,
|
|
).withOpacity(0.1),
|
|
blurRadius: 30,
|
|
offset: const Offset(0, 15),
|
|
),
|
|
],
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(132),
|
|
child: Stack(
|
|
children: [
|
|
Container(color: const Color(0xFFFAFAFA)),
|
|
Align(
|
|
alignment: Alignment.bottomCenter,
|
|
child: CozyWave(
|
|
percentage: flux.progress,
|
|
color: const Color(
|
|
0xFF81D4FA,
|
|
).withOpacity(0.6),
|
|
),
|
|
),
|
|
Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
"${(flux.progress * 100).toInt()}%",
|
|
style: GoogleFonts.nunito(
|
|
fontSize: 56,
|
|
fontWeight: FontWeight.w900,
|
|
color: const Color(0xFF5D4037),
|
|
),
|
|
),
|
|
Text(
|
|
"${flux.intake.toInt()} / ${flux.dailyGoal.toInt()} ml",
|
|
style: GoogleFonts.quicksand(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: const Color(0xFFA1887F),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 20),
|
|
child: Wrap(
|
|
spacing: 16,
|
|
children: CozyDrinkType.values.map((type) {
|
|
return _buildAddButton(context, type);
|
|
}).toList(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildHeader(FluxService flux) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(24.0),
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
"FluxWater:Monitor",
|
|
style: GoogleFonts.nunito(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.grey.withOpacity(0.5),
|
|
letterSpacing: 1.5,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
flux.encouragement,
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.nunito(
|
|
fontSize: 22,
|
|
fontWeight: FontWeight.w700,
|
|
color: const Color(0xFF5D4037),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildAddButton(BuildContext context, CozyDrinkType type) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
context.read<FluxService>().addDrink(250, type);
|
|
HapticFeedback.lightImpact();
|
|
},
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
width: 60,
|
|
height: 60,
|
|
decoration: BoxDecoration(
|
|
color: type.pastelColor.withOpacity(0.3),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
type.icon,
|
|
color: type.pastelColor.withOpacity(1.0),
|
|
size: 28,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
type.label,
|
|
style: GoogleFonts.quicksand(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
color: const Color(0xFF8D6E63),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBlob(double size, Color color) {
|
|
return Container(
|
|
width: size,
|
|
height: size,
|
|
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
|
|
);
|
|
}
|
|
}
|