import 'package:flutter/material.dart'; import '../../../utils/CirclePainter.dart'; class DragWidget extends StatefulWidget { @override _DragWidgetState createState() => _DragWidgetState(); } class _DragWidgetState extends State { double _sliderValue = 0.0; @override Widget build(BuildContext context) { return Scaffold( body: Stack( fit: StackFit.expand, 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 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); } }