如何在对话框中显示 showDateRangePicker？

Question

由于某种原因，我无法在对话框小部件内显示

showDateRangePicker

， 我确实尝试了很多方法，但不断收到一些奇怪的

Future<DateTimepicker?>

错误，目前showDateRangePicker使用整个屏幕，我认为有一个

这是它的代码

Future<void> openDetail(PlutoCell? cell, String field, String userId) async {
    print('inside openDetail');
    final DateTimeRange? picked = await showDateRangePicker(
      context: context,
      initialDateRange: _dateRange,
      firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 90)),
    );
    if (picked != null && picked != _dateRange) {
      setState(() {
        _dateRange = picked;
      });
    }
    final String date = _dateRange.start.toString().substring(0, 10);
    final String date2 = _dateRange.end.toString().substring(0, 10);
    final String dateRange = '$date - $date2';
  }
}

这是该类的完整代码

class Leave extends StatefulWidget {
  const Leave({super.key});
  @override
  State<Leave> createState() => _LeaveState();
}
class _LeaveState extends State<Leave> {
  PlutoGridStateManager? _stateManager;
  DateTimeRange _dateRange = DateTimeRange(
    start: DateTime.now(),
    end: DateTime.now().add(const Duration(days: 90)),
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: DefaultTabController(
        length: 3,
        child: Column(
          children: [
            const TabBar(
              tabs: [
                Tab(text: 'Captain  X Leave'),
                Tab(text: 'First Officer Leave'),
                Tab(text: 'Cabin Crew Leave'),
              ],
              indicatorColor: Color.fromARGB(255, 102, 249, 4),
              indicatorSize: TabBarIndicatorSize.label,
            ),
            Expanded(
              child: TabBarView(
                children: [
                  _buildTable(CAPTAIN_DATA),
                  _buildTable(FIRST_OFFICER_DATA),
                  _buildTable(CABIN_CREW_DATA),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
  Widget _buildTable(List<Map<String, String>> data) {
    return PlutoGrid(
        columns: [
          PlutoColumn(
            frozen: PlutoColumnFrozen.start,
            title: 'NAME',
            field: 'name',
            type: PlutoColumnType.text(),
            width: 200,
          ),
          ...List.generate(
            10,
            (index) => PlutoColumn(
              title: 'Leave ${index + 1}',
              field: 'leave${index + 1}',
              type: PlutoColumnType.text(),
              width: 100,
            ),
          ),
        ],
        rows: List.generate(
          data.length,
          (index) => PlutoRow(
            cells: {
              'name': PlutoCell(value: data[index]['NAME']!),
              ...Map.fromIterable(
                  List.generate(
                    10,
                    (index) => 'leave${index + 1}',
                  ),
                  value: (_) => PlutoCell(value: '')),
            },
          ),
        ),
        mode: PlutoGridMode.selectWithOneTap,
        onSelected: (event) {
          print('inside onSelected');
          dynamic userId = 'yo';
          openDetail(event.cell, event.cell!.column.field, userId);
        },
        onChanged: (event) {
          print('onchanged');
        },
        onLoaded: (PlutoGridOnLoadedEvent event) {
          _stateManager = event.stateManager;
        });
  }
  Future<void> openDetail(PlutoCell? cell, String field, String userId) async {
    print('inside openDetail');
    final DateTimeRange? picked = await showDateRangePicker(
      context: context,
      initialDateRange: _dateRange,
      firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 90)),
    );
    if (picked != null && picked != _dateRange) {
      setState(() {
        _dateRange = picked;
      });
    }
    final String date = _dateRange.start.toString().substring(0, 10);
    final String date2 = _dateRange.end.toString().substring(0, 10);
    final String dateRange = '$date - $date2';
  }
}

当然有一些软件包，但我不想使用它们，我只是想看看我做错了什么？

Answer 1

要修改

showDateRangePicker

你必须使用它的

builder

属性。这里已经给出了详细的解释 Flutter 让 showDateRangePicker 更小 .

我在下面添加了一个小示例，它限制了

showDateRangePicker

的大小。

完整代码：-

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

Future<DateTimeRange?> dateRangePicker(BuildContext context){

  return showDateRangePicker(
          context: context,
          firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 90)),
          initialDateRange: DateTimeRange(
            end: DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 13),
            start: DateTime.now(),
          ),
          builder: (context, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ConstrainedBox(
                  constraints: const BoxConstraints(
                    maxWidth: 300,
                    maxHeight: 400
                  ),
                  child: child,
                )
              ],
            );
          }) ;
    
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:  Center(
      child: GestureDetector(
        onTap: ()  {
          
          dateRangePicker(context);
        },
        child: const Text("Picker"))
    ));
  }
}

输出：-