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

Question

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

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

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

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,
        ),
      ),

Answer 2

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

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")
)

这是有关如何使用它的完整示例：

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