Flutter Custom Calender

Juned Raza
2 min readMar 9, 2021

Implement your own custom calendar in Flutter without using any dependencies.

Photo by Waldemar Brandt on Unsplash

In many Flutter applications, we have to use Calendar but for this much simple thing we end up using packages. Why not design your own Custom Calendar widget in Flutter. We are going to implement the Below Horizontally-Scrolling Calendar Widget.

First of All, we have to start with defining our List of Days and months. You can just define a List of type String.

Then we need to Define our variable to track the Date. In addition to the date variable, we also need an index tracker to track the position of the index in the ListView. We will implement a horizontal LitsView with itemCount equal to the number of dates we want to show in our calendar.

For showing the Current Date in a text widget we can use selectedDate Variable with our pre-defined list of months and weekdays.

Full Code For The Above Custom Widget as follows.

Here we are done with building our Calendar Widget. You can use the Logic of starting with DateTime.now( ) to get the current date to add a calendar of as many days you want. You can also change the widget as per your requirement.

--

--

Juned Raza

Flutter Developer, Andriod Application Developer, Django Developer ,Computer Engineering student at ZHCET, Aligarh Muslim University.