Flutter点击日历图标触发日期选择时出现空白屏求助

核心问题分析 #

1. FutureBuilder重复执行异步操作
   你在build方法中直接将loadData()作为FutureBuilder的future参数，导致每次页面重建（比如打开日期选择器时的上下文变化）都会重新调用loadData()，触发重复的网络请求/数据加载，一旦异步操作抛出异常，FutureBuilder未处理错误状态，就会返回空白页面。

2. 未处理FutureBuilder的错误状态
   当前代码只判断了snapshot.hasData的情况，完全忽略了snapshot.hasError的场景，当loadData()执行失败时，builder没有返回任何Widget，直接导致页面空白。

3. 日期选择器参数配置错误
   showCustomDateRangePicker中同时设置minimumDate: DateTime.now()和endDate: DateTime.now()，且未指定合理的maximumDate，可能导致插件内部逻辑冲突，触发异常引发页面崩溃。

修复步骤 #

1. 避免FutureBuilder重复执行异步操作

将loadData()的调用移到initState中，保存为一个成员变量，确保只执行一次：

class _FerieScreenState extends State<FerieScreen> {
  DateTime startData, endData;
  List<Ferie> listaFerie;
  var check = false;
  Future<bool> _loadDataFuture; // 新增成员变量

  @override
  void initState() {
    super.initState();
    _loadDataFuture = loadData(); // 在初始化时执行一次
  }

  // 保持原有的loadData方法不变
  Future<bool> loadData() async {
    listaFerie = await Ferie.ricerca();
    urlprofiloImage = await Utente.getProfiloImmagine();
    return true;
  }

  // ...其他方法
}

然后修改FutureBuilder的future参数：

return FutureBuilder(
  future: _loadDataFuture, // 使用预初始化的Future
  builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
    // ...后续逻辑
  },
);

2. 处理FutureBuilder的错误状态

在builder中添加错误处理分支：

builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
  if (snapshot.hasError) {
    return Center(
      child: Text('加载失败: ${snapshot.error}'),
    );
  }
  if (!snapshot.hasData) {
    return const Center(child: Text("数据加载中..."));
  } else {
    // 原有的Scaffold代码
  }
}

3. 修正日期选择器参数配置

调整selectDate方法的参数，设置合理的日期范围，并在选择日期后调用setState更新UI：

Future<void> selectDate(BuildContext context) async {
  showCustomDateRangePicker(
    context,
    dismissible: true,
    minimumDate: DateTime.now().subtract(const Duration(days: 365)), // 允许选择过去1年的日期
    maximumDate: DateTime.now().add(const Duration(days: 365)), // 允许选择未来1年的日期
    startDate: startData ?? DateTime.now(), // 初始选中的开始日期
    endDate: endData ?? DateTime.now(), // 初始选中的结束日期
    onApplyClick: (start, end) {
      setState(() {
        startData = start;
        endData = end;
      });
    },
    onCancelClick: () {},
  );
}

4. 额外优化：返回首页的导航逻辑

当前返回首页使用Navigator.push，会新增页面栈，建议改为Navigator.pop（如果当前页面是从首页跳转过来的）：

onPressed: () {
  Navigator.pop(context);
},

内容的提问来源于stack exchange，提问作者riki