Time Seek Slider widget to display and select date and time.
Features
- Set available term (fixedTerm, from, to)
- Set width of section (sectionWidth)
- Select time of section (sectionTime: 10s, 30s, 1m, 10m, 1h, 3h, 12h, 24h)
- Select color of primary and secondary section
- Select color of time text
- Show current time over center line
- Add event layer overlay with height / color / period
- Drag or Tap to change selected DateTime
- Recieve event changed time
- Recieve event dragging time
Getting started
Add time_seek_slider: ^0.0.6
to your pubspec.yaml
dependencies. And import it:
import 'package:time_seek_slider/time_seek_slider.dart';
Usage
Simply create a TimeSeekSlider
widget, and pass the required params.
Add longer examples to /example
folder.
DateTime _selectedTime = DateTime(2024,4,28,15,30);
TimeSeekSlider(
selectedTime: _selectedTime,
onChangedSelectedTime: (time) {
setState(() {
_selectedTime = time;
});
},
),
If use fixed term, set fixedTerm = true
.
DateTime _from = DateTime(2024,4,28,0,0);
DateTime _to = DateTime(2024,4,29,0,0);
DateTime _selectedTime = DateTime(2024,4,28,15,30);
TimeSeekSlider(
fixedTerm: true
from: _from,
to: _to,
selectedTime: _selectedTime,
onChangedSelectedTime: (time) {
setState(() {
_selectedTime = time;
});
},
),
Params
Param | M/O | Type | |
---|---|---|---|
selectedTime | M | DateTime | Selected time |
fixedTerm | O | bool | Set if available term fixed |
from | O | DateTime | Start time of fixed term |
to | O | DateTime | End time of fixed term |
sectionTime | O | int | Time of one section |
sectionWidth | O | int | Width (px) of one section |
timeTextColor | O | Color | Color of time text |
sectionColorPrimery | O | Color | Color of primery section |
sectionColorSecondary | O | Color | Color of secondary section |
centerLineColor | O | Color | Color of center line (current time line) |
showCurrentTime | O | ShowCurrentTime | Show current time over center line |
currentTimeTextColor | O | Color | Color of current time text |
currentTimeTextBackgroundColor | O | Color | Background color of current time text |
events | O | List< TimeEvent >? | Event information displayed overlay the slider |
event | M/O | |
---|---|---|
onChangedSelectedTime | M | Fired when tap the bar or end of dragging. |
onChangingSelectedTime | O | Fired when dragging the bar. |