Building a Customizable Reservation Timeline in Flutter

Other Questions Jira
1

I’m working on a Flutter app for booking tables. The main screen needs a timeline view with tables as rows and hours as columns. The tricky part is making reservations adjustable. I want users to be able to tap and drag the edges of a reservation to change its duration.

For example, a booking from 3:00 PM to 3:30 PM should be extendable to 4:00 PM by dragging. I’ve looked into Synfusion but it doesn’t seem to have this feature. Their drag function only moves items around.

Has anyone built something similar? I’m looking for a way to create an interactive timeline where users can easily modify reservation lengths. Any suggestions for packages or custom implementations would be super helpful!

Here’s a basic code snippet of what I’m trying to achieve:

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

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

  void updateBookingDuration(Booking booking, Duration newDuration) {
    // Logic to extend or shorten booking
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: bookings.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onHorizontalDragUpdate: (details) {
            // Handle drag to update booking duration
          },
          child: BookingTile(booking: bookings[index]),
        );
      },
    );
  }
}

Any ideas on how to implement the drag-to-extend functionality?

2

I’ve tackled a similar challenge in one of my projects. Instead of relying on external packages, I built a custom solution using a combination of Stack, Positioned, and GestureDetector widgets. I started by designing a basic grid layout and then overlaid the reservation items with precise positioning. When handling drags, I calculated the new start and end times based on the user touch location. It was a trial-and-error process, but this method provided me with full control over the UI and interactions, ensuring smooth animations and proper handling of overlapping reservations.

3

hey dancingfox, i faced a similar challenge. have you tried the table_calendar package? it’s not perfect but you can customize it for draggable events. another option is building your own widget with GestureDetector and CustomPainter. it’s more work but gives you full control. good luck with ur project!

4

For your reservation timeline, I’d recommend exploring the custom widget route using GestureDetector and CustomPainter. While it requires more initial effort, it offers unparalleled flexibility for your specific needs. Start by creating a basic grid layout, then implement gesture recognition for tapping and dragging. Use CustomPainter to draw the reservation blocks and update their dimensions based on user interactions. You might also want to look into the InteractiveViewer widget for additional functionality like zooming and panning. Remember to optimize performance, especially if you’re dealing with a large number of reservations or a long time range.