How to create a specific Picker date

Question

Here’s my code, no bugs, but I was trying to implement an adjustment on the Picker date and I couldn’t get until then.

I wanted to create a Picker date that selected from week to week ie 7 days, from Sunday to Saturday. User cannot change to less than or more than 7 days, it is preset.

But I couldn’t get it right yet haha, some help?

import 'package:date_range_picker/date_range_picker.dart' as DateRangePick;
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

import '../constants.dart';
import '../components/chart_bar.dart';

class DetailsScreen extends StatefulWidget {
  @override
  _DetailsScreenState createState() => _DetailsScreenState();
}

class _DetailsScreenState extends State<DetailsScreen> {
  DateTime _startDate = DateTime.now().subtract(Duration(days: 7));
  DateTime _endDate = DateTime.now();

  Future displayDateRangePicker(context) async {
    final List<DateTime> picked = await DateRangePick.showDatePicker(
      context: context,
      initialFirstDate: _startDate,
      initialLastDate: _endDate,
      firstDate: DateTime(DateTime.now().year - 10),
      lastDate: DateTime.now(),
    );
    if (picked != null && picked.length == 2) {
      setState(() {
        _startDate = picked[0];
        _startDate = picked[1];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    _detailsScreen() {
      return Scaffold(
        backgroundColor: kBlackColor,
        body: SafeArea(
          child: Center(
            child: Column(
              children: <Widget>[
                FlatButton(
                  child: Text(
                    '${DateFormat('d / MM / y').format(_startDate)} - ${DateFormat('d / MM / y').format(_endDate)}',
                    style: kWhite20RegularTextStyle,
                  ),
                  onPressed: () async {
                    await displayDateRangePicker(context);
                  },
                ),
              ],
            ),
          ),
        ),
      );
    }

    return _detailsScreen();
  }
}

Answer 1

Here is an example using Flutter datepicker, since version 1.2 Flutter’s native datepicker already allows a range.

For more information: https://medium.com/flutter/announcing-flutter-1-20-2aaf68c89c75

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date Picker',
      home: DetailsScreen(),
    );
  }
}

class DetailsScreen extends StatefulWidget {
  @override
  _DetailsScreenState createState() => _DetailsScreenState();
}

class _DetailsScreenState extends State<DetailsScreen> {
  static final DateTime _startDate = DateTime.now().subtract(Duration(days: 7));
  static final DateTime _endDate = DateTime.now();
  DateTimeRange selectedDate = DateTimeRange(start: _startDate, end: _endDate);

  Future<void> _selectDate(BuildContext context) async {
    final DateTimeRange picked = await showDateRangePicker(
        context: context,
        initialDateRange: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate)
      setState(() {
        //TODO fazer a validação.
        selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Date Picker'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("Start: ${selectedDate.start.toLocal()} "
                "\nEnd: ${selectedDate.end.toLocal()} "),
            SizedBox(
              height: 20.0,
            ),
            RaisedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter’s Datepicker has the methods to capture the datepicker date exchange event as private.

I recommend opening an Issue for Flutter detailing this problem. And create a Fork or package with this setting.

The methods are: _handleStartDateChanged and _handleEndDateChanged