Flutter table calendar produces no result on the screen

Question

I followed a tutorial online of flutter but I could not get the screen to show the calendar, it just shows a blank screen

The code

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FirstPage(),
    );
  }
}

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

  @override
  State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  DateTime today = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Title'),
      ),
      body: TableCalendar(
        focusedDay: today,
        firstDay: DateTime.utc(2023, 11, 12),
        lastDay: DateTime.utc(2030, 11, 12),
      ),
    );
  }
}

Flutter doctor -v

 [✓] Flutter (Channel stable, 3.10.6, on macOS 12.3.1 21E258 darwin-arm64, locale en-US)
    • Flutter version 3.10.6 on channel stable at /Users/ingjirayu/dev_env/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (3 months ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/ingjirayu/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E500a
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.2.4)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.83.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.74.0

[✓] Connected device (3 available)
    • iPhone 13 Pro Max (mobile) • 13F56FF1-153B-4B23-8629-15E71603E583 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 12.3.1 21E258
      darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 118.0.5993.88

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Pubspec.yaml

name: basics
description: A new Flutter project.

publish_to: "none" 


version: 1.0.0+1

environment:
  sdk: ">=3.0.6 <4.0.0"


dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.0.9

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "images/launcher_icon.png"

  
  flutter_lints: ^2.0.0


flutter:

  uses-material-design: true

  assets:
    - images/
  
  

And this is the screen from the xcode simulator enter image description here

I was trying to make a bottom navigator go to a page with a calendar then it didn't work. Before the bottom navigation bar works normally so I created a new project to test a standalone calendar to see if the problem was from the bottom navigation bar or not and I get an empty screen and no other content.

Answer 1

Your focussed day is today but your first date is November 12, 2023. That is why you get a blank screen.

Change your first date to October 1, 2023 and try again.

body: TableCalendar(
  focusedDay: DateTime.now(),
  firstDay: DateTime.utc(2023, 10, 01),
  lastDay: DateTime.utc(2030, 11, 12),
),