Flutter – Implementing Calendar
Last Updated :
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
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 {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'To Do List' ,
debugShowCheckedModeBanner: false ,
theme: ThemeData(
primarySwatch: Colors.green,
),
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' ;
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: Text( "Geeks for Geeks" ),
),
body: Center(
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 {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'To Do List' ,
debugShowCheckedModeBanner: false ,
theme: ThemeData(
primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Calendar(),
);
}
}
|
Code of First Screen:
Dart
import 'package:flutter/material.dart' ;
import 'package:table_calendar/table_calendar.dart' ;
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: Text( "Geeks for Geeks" ),
),
body: Center(
child: TableCalendar(
calendarController: _calendarController,
),
),
);
}
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...