Creating a Customizable Timeline for Table Reservations in Flutter

Other Questions Jira
1

I’m working on a Flutter app for restaurant bookings. The main screen needs a timeline view showing tables and hours. I want to display tables as rows on the left and time slots as columns on top. The tricky part is making reservations adjustable. Users should be able to tap and drag a reservation to change its duration, like extending a 30-minute booking to an hour.

I’ve looked into Syncfusion, but it doesn’t seem to offer this drag-to-extend feature. Has anyone found a good way to build this kind of interactive timeline in Flutter? I’m open to using other packages or custom solutions. The key is letting users easily modify reservation times by dragging.

Here’s a basic code example of what I’m aiming for:

class ReservationTimeline extends StatefulWidget {
  @override
  _ReservationTimelineState createState() => _ReservationTimelineState();
}

class _ReservationTimelineState extends State<ReservationTimeline> {
  List<Booking> bookings = [];

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 24, // 24 hours
        childAspectRatio: 2,
      ),
      itemBuilder: (context, index) {
        // Build timeline cells here
        // Add gesture recognizer for drag-to-extend
      },
    );
  }

  void extendBooking(Booking booking, Duration newDuration) {
    // Logic to extend booking duration
  }
}

Any suggestions on how to implement the drag-to-extend feature would be greatly appreciated!

2

hey alex, i had to do smth similar for a salon app. instead of using a package, i ended up building a custom widget with gesturedetector. used a stack to layer draggable elements over the timeline grid. it took some trial and error, but gave me more control over the drag behaviour. hope this helps!

3

For your restaurant booking app, I’d recommend a custom solution using a combination of GestureDetector and CustomPainter. Start by creating a base timeline grid with CustomPainter, then overlay draggable reservation widgets. Implement onPanUpdate to handle the drag logic, calculating new start and end times based on the drag position. To manage overlaps and conflicts, implement a ReservationManager class that validates and adjusts bookings in real-time. This approach offers maximum flexibility and performance, crucial for a smooth user experience. Remember to optimize rendering for larger datasets, perhaps by implementing virtual scrolling to handle numerous tables and time slots efficiently.

4

I faced a similar challenge when building a scheduling app for a yoga studio. I experimented with several approaches and eventually found that combining the flutter_timeline package with custom gesture detection produced the desired interactive timeline. In my implementation, I used flutter_timeline as the foundation for displaying the timeline and wrapped each reservation slot with a GestureDetector. When tracking the onPanUpdate event, I computed the new duration based on the drag distance and updated the state accordingly. Handling edge cases like overlapping reservations was complex, so I created a ReservationManager to manage such scenarios. Additionally, layering draggable elements on top of the timeline using a Stack widget provided smoother interactions. I hope these insights help you refine the drag-to-extend functionality for your restaurant booking app.