'How would I offset a 24hr time frame to start from the current time and end after 24 hrs

I currently have a slider that is ranged from 0 - 24 with 24 divisions (ie each division represents an hour.) Slider Example 1

Slider Example 2

I wrote a method below that converts the values from the sliders to 12hrs time format so it looks like this

String startingTimeDisplay() {
 if (_lowerValue > 12) {
  return (_lowerValue - 12.0).toStringAsFixed(0) + ':00 PM';
} else {
  return (_lowerValue).toStringAsFixed(0) + ':00 AM';
}}

String endingTimeDisplay() {
if (_upperValue > 12) {
  return (_upperValue - 12.0).toStringAsFixed(0) + ':00 PM';
} else {
  return (_upperValue).toStringAsFixed(0) + ':00 AM';
}}

The result of the above above produces this Slider converted to 12 hr format

I can get access to the current date and time using DateTime.now().

I am trying to offset the time frame of the slider to start from the current time to 24 hrs after that so for example, if the current time is 3pm, the slider should start from 3pm and end at 3pm tomorrow. Any ideas?

dart flutter

Solution 1:^[1]

    class HomePage extends StatefulWidget {
  @override
  HomePageState createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  DateTime _plusDay;
  DateTime _hourOnly;

  var _lowerValue;

  var _upperValue;

  @override
  void initState() {
    var _time = DateTime.now();
    _hourOnly = DateTime(_time.year, _time.month, _time.day, _time.hour);
    _plusDay = _hourOnly.add(Duration(days: 1));
    _lowerValue = _hourOnly.millisecondsSinceEpoch.toDouble();
    _upperValue = _plusDay.millisecondsSinceEpoch.toDouble();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    DateFormat usHour = DateFormat.jm();
    return Scaffold(
      body: Center(
        child: Container(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text(
                        "${usHour.format(DateTime.fromMicrosecondsSinceEpoch(_lowerValue.toInt() * 1000))}"),
                    Expanded(
                      child: new RangeSlider(
                        min: _hourOnly.millisecondsSinceEpoch.toDouble(),
                        max: _plusDay.millisecondsSinceEpoch.toDouble(),
                        lowerValue: _lowerValue,
                        upperValue: _upperValue,
                        divisions: 24,
                        showValueIndicator: false,
                        valueIndicatorMaxDecimals: 1,
                        onChanged:
                            (double newLowerValue, double newUpperValue) {
                          setState(() {
                            _lowerValue = newLowerValue;
                            _upperValue = newUpperValue;
                          });
                        },
                        onChangeStart:
                            (double startLowerValue, double startUpperValue) {
                          print(
                              'Started with values: $startLowerValue and $startUpperValue');
                        },
                        onChangeEnd:
                            (double newLowerValue, double newUpperValue) {
                          print(
                              'Ended with values: $newLowerValue and $newUpperValue');
                        },
                      ),
                    ),
                    Text(
                        "${usHour.format(DateTime.fromMicrosecondsSinceEpoch(_upperValue.toInt() * 1000))}"),
                  ],
                ),
                //
              ],
            ),
          ),
        ),
      ),
    );
  }
}

used https://stackoverflow.com/a/53992653/9478011 to convert 24hrs to 12hrs

Solution 2:^[2]

Rather than hard coding the format you could use intl's DateFormat. This code:

import 'package:intl/intl.dart';

void main() {
  DateTime now = DateTime.now();
  print(now);
  DateTime nowRounded = DateTime(now.year, now.month, now.day, now.hour);
  DateTime tomorrowRounded =
      DateTime(now.year, now.month, now.day + 1, now.hour);
  print(nowRounded);
  print(tomorrowRounded);

  DateFormat usHour = DateFormat.jm();
  print(usHour.format(nowRounded));
  print(usHour.format(tomorrowRounded));
}

produces:

2018-12-31 21:13:54.434448
2018-12-31 21:00:00.000
2019-01-01 21:00:00.000
9:00 PM
9:00 PM

Solution 3:^[3]

Row( children: [ Text( "${usHour.format(DateTime.fromMicrosecondsSinceEpoch(_lowerValue.toInt() * 1000))}"), Expanded( child: RangeSlider( min: _hourOnly.millisecondsSinceEpoch.toDouble(), max: _plusDay.millisecondsSinceEpoch.toDouble(), values: RangeValues(_lowerValue,_upperValue), divisions: 24, onChanged: (rv) { setState(() { _lowerValue = rv.start; _upperValue = rv.end;}); }, onChangeStart: (rv) { setState(() { _lowerValue = rv.start;}); }, onChangeEnd: (rv) { setState(() { _upperValue = rv.end; }); }, ), ), Text( "${usHour.format(DateTime.fromMicrosecondsSinceEpoch(_upperValue.toInt() * 1000))}"), ], ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Richard Heap
Solution 3	M.Talha Sh

'How would I offset a 24hr time frame to start from the current time and end after 24 hrs

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]