ModernMemoires/lib/views/write_page/write_page.dart

164 lines
6.0 KiB
Dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:moody/views/write_page/widget/why_widget.dart';
class WritePage extends StatefulWidget {
final double moodPercentage;
const WritePage({Key? key, required this.moodPercentage}) : super(key: key);
@override
_WritePageState createState() => _WritePageState();
}
class _WritePageState extends State<WritePage> {
double _sliderValue = 0.0;
bool _sliderChanged = true;
@override
void initState() {
super.initState();
_sliderValue = widget.moodPercentage; // Set the value here
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: [
// Background circle
Positioned.fill(
child: CustomPaint(
painter: CirclePainter(_sliderValue),
),
),
// Main content
Padding(
padding: const EdgeInsets.fromLTRB(25, 175, 25, 25),
// padding: const EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// Date
Text(
"${DateFormat('dd MM yyyy').format(DateTime.now())}",
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
// Text prompt
Text(
"how fullfilled do you feel today?",
style: TextStyle(
fontSize: 22, fontWeight: FontWeight.bold),
),
SizedBox(height: 32), // 2 line padding
// Slider and label
Row(
children: [
Expanded(
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
disabledThumbColor: Colors.amber,
activeTrackColor: Colors.black,
trackShape: RectangularSliderTrackShape(),
inactiveTickMarkColor: Colors.red,
inactiveTrackColor: Colors.transparent,
valueIndicatorColor: Colors.purple,
overlayColor: Colors.transparent,
activeTickMarkColor: Colors.red,
showValueIndicator: ShowValueIndicator.always,
trackHeight: 2,
thumbColor: Colors.transparent,
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 0.0),
rangeThumbShape: RoundRangeSliderThumbShape(
disabledThumbRadius: 0,
enabledThumbRadius: 0,
elevation: 22),
),
child: Slider(
min: 0.0,
max: 100.0,
value: _sliderValue,
onChanged: (value) {
setState(() {
_sliderValue = value;
_sliderChanged = true;
});
},
),
),
),
// Arrow icon
if (!_sliderChanged) Icon(Icons.arrow_forward),
],
),
// Drag me label
if (!_sliderChanged)
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text("Drag me"),
),
),
// Slider percentage
if (_sliderValue > 0)
Text(
"${_sliderValue.toStringAsFixed(0)}%",
style: TextStyle(fontSize: 18),
),
// Why? button
TextButton(
onPressed: () {
context.go('/write', extra: _sliderValue);
// Implement your why? functionality here
},
child: WhyWidget(),
),
],
),
),
// Skip/Save button
Positioned(
bottom: 20,
right: 20,
child: TextButton(
onPressed: () {
context.go("/home");
},
child: Text(_sliderChanged ? "Save" : "Skip"),
),
),
],
),
),
),
),
);
}
}
class CirclePainter extends CustomPainter {
final double value;
CirclePainter(this.value);
@override
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = Colors.greenAccent.withOpacity(0.5)
..style = PaintingStyle.fill;
double radius = value * size.width / 100 * 1.5;
canvas.drawCircle(Offset(size.width / 6, size.height / 4), radius, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}