SyncFusion日历嵌入Flutter应用仪表板后不显示如何修复？

问题根因 #

• 父组件未给SfCalendar提供明确的布局约束：CalendarTeacherPage中用无宽高的Container包裹CalendarWidget，SfCalendar需要明确的宽高约束才能正常渲染，作为首页时Scaffold的body默认提供全屏约束，所以可以正常显示，跳转后失去约束就会渲染为0尺寸不可见。
• onLongPress回调中Provider的listen参数配置错误：回调方法中获取Provider实例不能设置listen: true，该参数仅允许在build方法中使用，错误配置会触发异常导致页面渲染失败。
• 潜在的EventProvider上下文缺失问题：如果EventProvider没有注入到当前页面的祖先节点中，获取events时会抛出异常，导致页面空白。

修复步骤 #

1. 移除CalendarTeacherPage中包裹CalendarWidget的无约束Container，直接将CalendarWidget作为Scaffold的body，由Scaffold提供全屏布局约束。
2. 将CalendarWidget的onLongPress回调中Provider的listen参数改为false。
3. 确认当前路由栈的上层已经正确注入EventProvider，确保当前页面上下文可以正常访问到EventProvider实例。

修改后代码示例 #

CalendarTeacherPage 代码 #

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

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

class _CalendarTeacherPageState extends State<CalendarTeacherPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const CalendarWidget(),
      appBar: AppBar(
        title: const Text('Calendar'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add, color: Colors.white),
        backgroundColor: Colors.red,
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const EventEditingPage()),
        ),
      ),
    );
  }
}

CalendarWidget 代码 #

class CalendarWidget extends StatelessWidget {
  const CalendarWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final events = Provider.of<EventProvider>(context).events;

    return SfCalendar(
      view: CalendarView.schedule,
      dataSource: EventDataSource(events),
      initialSelectedDate: DateTime.now(),
      cellBorderColor: Colors.transparent,
      onLongPress: (details) {
        final provider = Provider.of<EventProvider>(context, listen: false);
        provider.setDate(details.date!);
        showModalBottomSheet(
          context: context,
          builder: (context) => const TasksWidget(),
        );
      },
    );
  }
}

额外排查方向 #

如果修改后仍无法正常显示，可以给SfCalendar外层手动添加固定宽高的约束测试，确认是否是布局约束问题：

SizedBox(
  width: double.infinity,
  height: 600,
  child: SfCalendar(...),
)

同时可以检查EventDataSource的实现逻辑是否正确，是否存在空数据导致的渲染异常。

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