Flutter – Implementing Calendar

Nowadays in most of the apps, we see Calendar in most of the apps for displaying birth dates or for any appointment application. Displaying the date in the app with the help of the Calendar view gives a better user experience. In this article, we are going to see how to implement Calendar in our Flutter App.

Follow the steps to implement Calendar in our Flutter App

Step 1: Add the following dependency in your pubspec.yaml file

Add the given dependency in pubspec.yaml file.

Dart

dependencies:

  table_calendar: ^2.3.3

Now click on pub.get to configure.

Step 2: Navigate to main.dart() file and return Material App()

First, we have declared MyApp() in runApp in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme of our App as primarySwatch as green. Then we have given our first screen of or slider app in the home: Calendar()

Dart

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

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    // Material App
    return MaterialApp(
      title: 'To Do List',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(

        // Theme color
        primarySwatch: Colors.green,
      ),

     /*
     home: ChangeNotifierProvider(
     create: (context)=> TodoModel(),
     child: HomeScreen(),
       ),
    ); */

      // Our First Screen
    home: Calendar(),
    );
  }
}

Step 3: Declare StatefulWidget() for Calendar() class

In that state class, we have given _calendarController. After that, we have declared Scaffold() in which we have declared appbar. Which consists of the title of the app. In the body section, we have declared TableCalendar() wrapped with the centre widget. This imported library will give us the calendar of the specific year in our app. This Library will also display the year as well as the month in our app. In that TableCalendar() we have declared controller in which we have returned _calendarController which we have declared in State class.

Dart

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

// StatefulWidget
class Calendar extends StatefulWidget {
  @override
  _CalendarState createState() => _CalendarState();
}

class _CalendarState extends State<Calendar> {

  // created controller
  CalendarController _calendarController = new CalendarController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        // Title of app
        title: Text("Geeks for Geeks"),
      ),
      body: Center(

        // Declared TableController
        child: TableCalendar(
            calendarController: _calendarController,
        ),
      ),
    );
  }
}

Complete Source Code:

Dart

import 'package:flutter/material.dart';
import 'package:todolistapp/CalendarApp.dart';

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

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To Do List',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

    // First screen of app
    home: Calendar(),
    );
  }
}

Code of First Screen:

Dart

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

// stateful widget created for calendar class
class Calendar extends StatefulWidget {
  @override
  _CalendarState createState() => _CalendarState();
}

class _CalendarState extends State<Calendar> {

  CalendarController _calendarController = new CalendarController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        // title of app
        title: Text("Geeks for Geeks"),
      ),
      body: Center(

        // create calendar
        child: TableCalendar(
            calendarController: _calendarController,
        ),
      ),
    );
  }
}

Output: