108 lines
3.1 KiB
Dart
108 lines
3.1 KiB
Dart
|
import 'package:flutter/material.dart';
|
||
|
|
|
||
|
|
class DragWidget extends StatefulWidget {
|
||
|
|
@override
|
||
|
|
_DragWidgetState createState() => _DragWidgetState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _DragWidgetState extends State<DragWidget> {
|
||
|
|
double _sliderValue = 0.0;
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return Scaffold(
|
||
|
|
body: Stack(
|
||
|
|
children: [
|
||
|
|
Positioned.fill(
|
||
|
|
child: CustomPaint(
|
||
|
|
painter: CirclePainter(_sliderValue),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||
|
|
children: [
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.only(top: 20.0, left: 20.0),
|
||
|
|
child: Text(
|
||
|
|
"${DateTime.now().toLocal()}",
|
||
|
|
style: TextStyle(fontSize: 18),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const Padding(
|
||
|
|
padding: EdgeInsets.only(left: 20.0),
|
||
|
|
child: Text(
|
||
|
|
"How are you today?",
|
||
|
|
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
SizedBox(height: 32), // 2 line padding
|
||
|
|
SliderTheme(
|
||
|
|
data: SliderTheme.of(context).copyWith(
|
||
|
|
trackShape: CustomTrackShape(),
|
||
|
|
thumbShape: SliderComponentShape.noThumb,
|
||
|
|
),
|
||
|
|
child: Slider(
|
||
|
|
min: 0.0,
|
||
|
|
max: 100.0,
|
||
|
|
value: _sliderValue,
|
||
|
|
onChanged: (value) {
|
||
|
|
setState(() {
|
||
|
|
_sliderValue = value;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
if (_sliderValue > 0)
|
||
|
|
Padding(
|
||
|
|
padding: EdgeInsets.only(left: 20.0),
|
||
|
|
child: Text(
|
||
|
|
"${_sliderValue.toStringAsFixed(0)}%",
|
||
|
|
style: TextStyle(fontSize: 18),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class CirclePainter extends CustomPainter {
|
||
|
|
final double value;
|
||
|
|
|
||
|
|
CirclePainter(this.value);
|
||
|
|
|
||
|
|
@override
|
||
|
|
void paint(Canvas canvas, Size size) {
|
||
|
|
var paint = Paint()
|
||
|
|
..color = Colors.blue.withOpacity(0.5)
|
||
|
|
..style = PaintingStyle.fill;
|
||
|
|
|
||
|
|
// Calculate circle radius based on slider value
|
||
|
|
double radius = value * size.width / 100;
|
||
|
|
canvas.drawCircle(Offset(80, 150), radius, paint);
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
|
||
|
|
}
|
||
|
|
|
||
|
|
class CustomTrackShape extends RoundedRectSliderTrackShape {
|
||
|
|
@override
|
||
|
|
Rect getPreferredRect({
|
||
|
|
required RenderBox parentBox,
|
||
|
|
Offset offset = Offset.zero,
|
||
|
|
required SliderThemeData sliderTheme,
|
||
|
|
bool isEnabled = false,
|
||
|
|
bool isDiscrete = false,
|
||
|
|
}) {
|
||
|
|
final double trackHeight = sliderTheme.trackHeight ?? 4;
|
||
|
|
final double trackLeft = offset.dx;
|
||
|
|
final double trackTop =
|
||
|
|
offset.dy + (parentBox.size.height - trackHeight) / 2;
|
||
|
|
final double trackWidth = parentBox.size.width;
|
||
|
|
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
|
||
|
|
}
|
||
|
|
}
|