在Flutter中制作日期范围选择器

Question

我正在尝试制作一个日期范围选择器，就像这样，在Flutter中，日期选择器从on值（今天的值）开始，然后用户选择所需的范围，最终我找到了这个包。

但是当我单击按钮作为日期选择器时，它无法打开。

我尝试使用另一个日期范围选择器包，但它没有帮助我！

- amira syam

Answer 1

Flutter现在拥有一个内置的日期范围选择器，以下是使用它的示例

IconButton(
        onPressed: () async {
          final picked = await showDateRangePicker(
            context: context,
            lastDate: endDate,
            firstDate: new DateTime(2019),
          );
          if (picked != null && picked != null) {
            print(picked);
            setState(() {
              startDate = picked.start;
              endDate = picked.end;
//below have methods that runs once a date range is picked 
              allWaterBillsFuture = _getAllWaterBillsFuture(
                  picked.start.toIso8601String(),
                  picked.end
                      .add(new Duration(hours: 24))
                      .toIso8601String());
            });
          }
        },
        icon: Icon(
          Icons.calendar_today,
          color: Colors.white,
        ),
      ),

- Nelson Bwogora

Answer 2

在这里，我使用Flutter内置的日期范围选择器，在其中您应该最初提供开始和结束日期，以显示所选范围，使用两个突出显示的按钮显示日期范围。在setState中，如果您在日期范围选择器弹出窗口中单击取消，则将分配初始日期范围。

import 'package:flutter/material.dart';

class DateRangeWidget extends StatefulWidget {
  DateRangeWidget({Key? key}) : super(key: key);

  @override
  State<DateRangeWidget> createState() => _DateRangeWidgetState();
}

class _DateRangeWidgetState extends State<DateRangeWidget> {
  DateTimeRange dateRange = DateTimeRange(
    start: DateTime(2021, 11, 5),
    end: DateTime(2022, 12, 10),
  );
  @override
  Widget build(BuildContext context) {
    final start = dateRange.start;
    final end = dateRange.end;

    return Column(children: [
      const Text(
        'Date Range',
        style: TextStyle(fontSize: 16),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            child: ElevatedButton(
              child: Text(
                '${start.year}/${start.month}/${start.day}',
              ),
              onPressed: pickDateRange,
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 20),
            child: ElevatedButton(
              child: Text(
                '${end.year}/${end.month}/${end.day}',
              ),
              onPressed: pickDateRange,
            ),
          ),
        ],
      )
    ]);
  }

  Future pickDateRange() async {
    DateTimeRange? newDateRange = await showDateRangePicker(
      context: context,
      initialDateRange: dateRange,
      firstDate: DateTime(2019),
      lastDate: DateTime(2023),
    );
    setState(() {
      dateRange = newDateRange ?? dateRange;

      // if (newDateRange == null) return;
      // setState(() => dateRange = newDateRange);
    });
  }
}
  [1]: https://istack.dev59.com/h1HIN.webp

- Bhargav Dobariya

Answer 3

有一个专门为此目的构建的包，date_range_picker 要安装它，您应该在 pubspec.yaml 文件的 dependecies 下添加以下行：

date_range_picker: ^1.0.5

您需要在想要使用该函数的Widget文件的顶部导入该包：

import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;

然后，您可以按照以下方式使用该软件包：

new MaterialButton(
    color: Colors.deepOrangeAccent,
    onPressed: () async {
      final List<DateTime> picked = await DateRagePicker.showDatePicker(
          context: context,
          initialFirstDate: new DateTime.now(),
          initialLastDate: (new DateTime.now()).add(new Duration(days: 7)),
          firstDate: new DateTime(2015),
          lastDate: new DateTime(2020)
      );
      if (picked != null && picked.length == 2) {
          print(picked);
      }
    },
    child: new Text("Pick date range")
)

This is a full example on how you could use it:

import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRagePicker;

void main() {
  runApp(MaterialApp(home: HomeScreen(), title: 'Flutter Date Range Example'));
}

class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: MaterialButton(
            color: Colors.deepOrangeAccent,
            onPressed: () async {
              final List<DateTime> picked = await DateRagePicker.showDatePicker(
                  context: context,
                  initialFirstDate: new DateTime.now(),
                  initialLastDate:
                      (new DateTime.now()).add(new Duration(days: 7)),
                  firstDate: new DateTime(2015),
                  lastDate: new DateTime(2020));
              if (picked != null && picked.length == 2) {
                print(picked);
              }
            },
            child: new Text("Pick date range")),
      ),
    );
  }
}

- Stefano Amorelli

---

我复制了这段代码，但在点击按钮时出现了以下异常信息：Exception has occurred. _AssertionError ('package:date_range_picker/date_range_picker.dart': Failed assertion: line 1280 pos 10: '!initialLastDate.isAfter(lastDate)': initialDate must be on or before lastDate)。 - amira syam

如何将初始选择的日期设定为今天，并在用户选择日期范围时检测日期范围。 - amira syam

@amira syam 你解决了这个错误吗？我正在使用showDateRangePicker。 - sherin