Flutter – Implementing Calendar

10 Jun, 2021
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
Add the given dependency in pubspec.yaml file.
Dart
dependencies:    table_calendar: ^2.3.3
Now click on pub.get to configure.
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(),    );  }}
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'; // StatefulWidgetclass 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,        ),      ),    );  }}
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(),    );  }}
  
 
Dart
import 'package:flutter/material.dart';import 'package:table_calendar/table_calendar.dart'; // stateful widget created for calendar classclass 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:
clintra
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Flexible Widget