Interactive Calendar: Friendly calendar with Flutter

Interactive Calendar

One of the amazing thing about Flutter is how easy it makes creating custom UI. In this tutorial we are going to create a friendly calendar — Interactive Calendar, which responds to:

• Design friendly calendar UI.
• Auto arrange items with cell size.
• Select specified cell.
• Flexible zoom in, zoom out.
• Amazing drag & drop data of cell.

The first, we need a basic UI of calendar. So, lets declare the widget:

This simple widget build a background and a container, which contain calendar UI at buildBody:

As you can see, we need focus on method: handlePointerMove, handlePointerUp on Listener; handleLongPress, handleTap, handleTapDown, onScaleStart, onScaleUpdate on GestureDetector; the main painter buildCalendarPainter. Don’t forget a BoxConstraints, that’s all !

Next, we draw the calendar:

Details of CalendarPainter, we will exam it on Github in later. Important, we must setting handles:

• The first, we need handle gestures:

• And listen pointers:

Finally, we can build Interactive calendar by simple way:

That’s all about creating interactive calendar, we’ll explore and exam it by source code at

beesightsoft/bss_flutter_open

Thanks for Reading…!!!