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

user_10530378 0
Viewed 624

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
3 Answers

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
user_95977060

enter image description here

    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

user_94780110

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))}"), ], ),

user_151289800
Related