Interactive Calendar: Friendly calendar with Flutter
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
Thanks for Reading…!!!