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.
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()
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.
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:
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:
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: