I’m building a restaurant reservation app in Flutter and need help creating a schedule interface. The layout should show restaurant tables as rows on the left side and time slots as columns across the top. Each booking appears as a block that shows the reserved time period.
The key functionality I need is the ability to resize these reservation blocks by dragging their edges. For instance, if someone has a booking from 2:00 PM to 2:30 PM, I want users to be able to drag the right edge of that block to extend it until 3:00 PM. This should work similar to how you can resize events in project management tools.
I looked into using Syncfusion Flutter Calendar but it seems like their drag functionality only moves events around rather than resizing them. Does anyone know how to implement this kind of resize-by-dragging feature? I specifically need to be able to stretch or shrink the time duration of bookings interactively.
I used InteractiveViewer with Transform widgets for my conference room booking system and it worked great. Built a grid where each reservation is a Container with custom border detection. For hit testing, I just check if the pan coordinates are within a certain distance from container edges. Instead of redrawing everything, I animate the width property when resizing - much cleaner. The tricky part was stopping horizontal scrolling from interfering with edge dragging. Fixed it by checking gesture velocity and direction to figure out what the user actually wants to do. Performance stayed solid even with tons of bookings on screen. Pro tip: clamp your resize bounds so bookings can’t shrink below minimum duration or go past your availability windows.
Had the same issue building a scheduling interface for a medical app. Custom painting was the most flexible fix. Create a custom widget using CustomPainter to draw your time grid and reservation blocks, then wrap it with GestureDetector for drag interactions. I detected hits on rectangle edges using the contains method on Rect objects. When someone drags near an edge, update the block’s width in real-time by recalculating time duration based on drag position. The tricky bit is mapping pixel coordinates back to time values, but once you nail that relationship it’s smooth sailing. Takes more code than a pre-built widget, but you get complete control over resize behavior. Pro tip: add padding around edges so they’re easier to grab on mobile.
flutter’s built-in widgets handle this just fine - no need for custom painting. use a stack with positioned widgets for each reservation block, wrap them in gesturedetector with onpanupdate. track which edge you’re dragging and update the width. i built something similar for a salon booking app and it worked perfectly. much easier than drawing from scratch.