Shitead 🪑 #

A modern, highly customizable Flutter package for building interactive passenger seat layouts with advanced features like driver seats, multi-selection capabilities, and comprehensive seat management.

Perfect for bus booking apps, cinema reservations, airline seat selection, and any application requiring visual seat arrangements.

✨ Features #

• 🚗 Driver Seat Support - Optional driver seat with distinct styling and behavior
• 🪑 Flexible Layout System - Configure seats per row, total seats, and spacing
• 🎯 Interactive Selection - Touch seats to select/deselect with smooth animations
• 📱 Material Design 3 - Modern UI that follows Material Design principles
• 📋 Detailed Info Modals - Beautiful bottom sheets showing seat information
• 🔧 Advanced Configuration - Pre-booked seats, unavailable seats, custom metadata
• 🎨 Theme Responsive - Automatically adapts to your app's color scheme
• 💰 Pricing Support - Built-in price property for seats
• 👥 Passenger Management - Custom passenger names and information
• ✅ Production Ready - Comprehensive test coverage and documentation
• 🚀 High Performance - Optimized for large seat layouts

📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  shitead: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:shitead/shitead.dart';

🚀 Quick Start #

Basic Usage #

import 'package:flutter/material.dart';
import 'package:shitead/shitead.dart';

class SeatSelectionScreen extends StatefulWidget {
  @override
  _SeatSelectionScreenState createState() => _SeatSelectionScreenState();
}

class _SeatSelectionScreenState extends State<SeatSelectionScreen> {
  List<Seat> selectedSeats = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Your Seats'),
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
      ),
      body: Column(
        children: [
          // Seat layout
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(16),
              child: SeatLayout(
                numberOfSeats: 20,
                seatsPerRow: 4,
                showDriverSeat: true,
                onSeatSelectionChanged: (seats) {
                  setState(() {
                    selectedSeats = seats;
                  });
                },
              ),
            ),
          ),

          // Selected seats info
          Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.surface,
              border: Border(
                top: BorderSide(
                  color: Theme.of(context).colorScheme.outline,
                ),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Selected Seats: ${selectedSeats.length}',
                  style: Theme.of(context).textTheme.titleMedium,
                ),
                if (selectedSeats.isNotEmpty)
                  Text(
                    selectedSeats.map((s) => s.seatNumber).join(', '),
                    style: Theme.of(context).textTheme.bodyMedium,
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Advanced Configuration #

SeatLayout(
  // Layout configuration
  numberOfSeats: 40,
  seatsPerRow: 4,
  showDriverSeat: true,

  // Selection behavior
  allowMultipleSelection: true,
  initialSelectedSeats: ['seat_5', 'seat_6'],

  // Visual customization
  seatSize: 55,
  seatSpacing: 12,

  // Seat states
  bookedSeats: ['seat_1', 'seat_15', 'seat_20'],
  unavailableSeats: ['seat_10', 'seat_25'],

  // Passenger information
  passengerNames: {
    'driver': 'John Smith (Driver)',
    'seat_1': 'Alice Johnson',
    'seat_15': 'Bob Wilson',
    'seat_20': 'Carol Davis',
  },

  // Custom metadata for each seat
  seatMetadata: {
    'seat_1': {
      'booking_id': 'BK001',
      'price': 45.0,
      'meal_preference': 'Vegetarian',
      'booking_time': '2024-08-07T10:30:00Z',
    },
    'seat_10': {
      'reason': 'Under maintenance',
      'estimated_fix': '2024-08-10',
      'maintenance_type': 'Cleaning',
    },
    'seat_15': {
      'booking_id': 'BK002',
      'price': 50.0,
      'special_needs': 'Wheelchair accessible',
    },
  },

  // Callback for selection changes
  onSeatSelectionChanged: (selectedSeats) {
    print('Selected ${selectedSeats.length} seats:');
    for (var seat in selectedSeats) {
      print('  - Seat ${seat.seatNumber} (${seat.id})');
      if (seat.metadata?['price'] != null) {
        print('    Price: \$${seat.metadata!['price']}');
      }
    }
  },
)

🎨 Seat Status Types #

The package supports five different seat statuses:

📊 API Reference #

SeatLayout Properties #

Seat Model #

class Seat {
  final String id;                    // Unique identifier (e.g., 'seat_1', 'driver')
  final String seatNumber;            // Display number (e.g., '1', 'D')
  final double? price;                // Optional seat price
  final SeatStatus status;            // Current status
  final int row;                      // Row position in layout
  final int column;                   // Column position in layout
  final bool isDriver;                // Driver seat flag
  final String? passengerName;        // Passenger name
  final Map<String, dynamic>? metadata; // Custom data
}

SeatStatus Enum #

enum SeatStatus {
  available,    // Can be selected
  selected,     // Currently selected
  booked,       // Already booked
  unavailable,  // Out of order
  driver,       // Driver seat
}

🎯 Use Cases #

Bus Booking Application #

SeatLayout(
  numberOfSeats: 45,
  seatsPerRow: 4,
  showDriverSeat: true,
  bookedSeats: bookingService.getBookedSeats(),
  passengerNames: bookingService.getPassengerNames(),
  seatMetadata: {
    for (var seat in bookingService.getSeatsWithPricing())
      seat.id: {'price': seat.price, 'class': seat.class}
  },
)

Cinema Hall Reservation #

SeatLayout(
  numberOfSeats: 120,
  seatsPerRow: 12,
  showDriverSeat: false,
  unavailableSeats: ['seat_15', 'seat_16'], // Broken seats
  seatMetadata: {
    for (var i = 1; i <= 24; i++)
      'seat_$i': {'type': 'premium', 'price': 15.0},
    for (var i = 25; i <= 120; i++)
      'seat_$i': {'type': 'standard', 'price': 10.0},
  },
)

Airline Seat Selection #

SeatLayout(
  numberOfSeats: 180,
  seatsPerRow: 6,
  showDriverSeat: false,
  seatSpacing: 4,
  seatSize: 45,
  seatMetadata: {
    // First class (rows 1-3)
    for (var i = 1; i <= 18; i++)
      'seat_$i': {'class': 'first', 'price': 200.0},
    // Business class (rows 4-8)
    for (var i = 19; i <= 48; i++)
      'seat_$i': {'class': 'business', 'price': 100.0},
    // Economy class (remaining)
    for (var i = 49; i <= 180; i++)
      'seat_$i': {'class': 'economy', 'price': 50.0},
  },
)

🛠️ Customization #

Theme Integration #

The package automatically adapts to your app's theme:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),
  ),
  // Your seats will use the theme colors automatically
)

Custom Styling #

You can customize the appearance by wrapping the widget:

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue.shade50, Colors.white],
    ),
  ),
  child: SeatLayout(
    // ... your configuration
  ),
)

📱 Platform Support #

• ✅ Android (API 16+)
• ✅ iOS (iOS 9.0+)
• ✅ Web (Canvas rendering)
• ✅ macOS (macOS 10.11+)
• ✅ Windows (Windows 10+)
• ✅ Linux (Any)

🧪 Testing #

The package includes comprehensive test coverage. Run tests with:

flutter test

For testing in your app:

import 'package:flutter_test/flutter_test.dart';
import 'package:shitead/shitead.dart';

void main() {
  testWidgets('SeatLayout should display correct number of seats', (tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: Scaffold(
          body: SeatLayout(
            numberOfSeats: 10,
            seatsPerRow: 2,
          ),
        ),
      ),
    );

    // Verify seats are rendered
    expect(find.byType(SeatWidget), findsNWidgets(11)); // 10 + driver
  });
}

📚 Example App #

Check out the comprehensive example app:

cd example
flutter run

The example includes:

• Different layout configurations
• Real-time seat selection
• Booking simulation
• Theme switching
• All seat statuses demonstration

🤝 Contributing #

We welcome contributions! Please see our contributing guidelines for details.

Development Setup #

1. Fork the repository
2. Clone your fork: git clone https://github.com/your-username/shitead.git
3. Create a feature branch: git checkout -b feature/amazing-feature
4. Make your changes and add tests
5. Run tests: flutter test
6. Commit: git commit -m 'Add amazing feature'
7. Push: git push origin feature/amazing-feature
8. Open a Pull Request

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

📝 Changelog #

See CHANGELOG.md for a detailed list of changes.

🙏 Credits #

• Author: Prasanna Poudel
• Flutter Team: For the amazing framework
• Community: For feedback and contributions

📞 Support #

• 📧 Email: your-email@example.com
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📖 Documentation: API Reference

Made with ❤️ for the Flutter community

Shitead - Flutter Seat Layout Package #

A modern Flutter package for building interactive passenger seat layouts with driver seat, selection functionality, and detailed seat information modals.

Features #

• 🚗 Driver Seat Support: Optional driver seat with distinct styling
• 🪑 Customizable Layout: Configure number of seats, seats per row, and layout
• 🎯 Interactive Selection: Touch seats to select/deselect with visual feedback
• 📱 Modern UI: Material Design 3 compliant with smooth animations
• 📋 Detailed Info Modals: Bottom sheet modals showing seat information
• 🔧 Flexible Configuration: Pre-booked seats, unavailable seats, custom metadata
• 🎨 Themeable: Respects app's color scheme and theme
• ✅ Well Tested: Comprehensive test coverage

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  shitead: ^0.0.1

Then run:

flutter pub get

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:shitead/shitead.dart';

class SeatSelectionScreen extends StatefulWidget {
  @override
  _SeatSelectionScreenState createState() => _SeatSelectionScreenState();
}

class _SeatSelectionScreenState extends State<SeatSelectionScreen> {
  List<Seat> selectedSeats = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Select Seats')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: SeatLayout(
          numberOfSeats: 20,
          seatsPerRow: 4,
          showDriverSeat: true,
          onSeatSelectionChanged: (seats) {
            setState(() {
              selectedSeats = seats;
            });
          },
        ),
      ),
    );
  }
}

Advanced Configuration #

SeatLayout(
  numberOfSeats: 30,
  seatsPerRow: 4,
  showDriverSeat: true,
  allowMultipleSelection: true,
  seatSize: 55,
  seatSpacing: 10,

  // Pre-select some seats
  initialSelectedSeats: ['seat_5', 'seat_6'],

  // Mark some seats as booked
  bookedSeats: ['seat_1', 'seat_15', 'seat_20'],

  // Mark some seats as unavailable
  unavailableSeats: ['seat_10'],

  // Add passenger names
  passengerNames: {
    'driver': 'John Doe',
    'seat_1': 'Alice Smith',
    'seat_15': 'Bob Johnson',
  },

  // Add custom metadata
  seatMetadata: {
    'seat_1': {
      'booking_id': 'BK001',
      'price': 50.0,
      'meal_preference': 'Vegetarian'
    },
    'seat_10': {
      'reason': 'Maintenance required',
      'estimated_fix': '2024-01-15'
    },
  },

  onSeatSelectionChanged: (selectedSeats) {
    print('Selected seats: ${selectedSeats.map((s) => s.seatNumber).join(', ')}');
  },
)

Seat Status Types #

• Available: Open for selection
• Selected: Currently selected by user
• Booked: Already taken by another passenger
• Unavailable: Out of order or maintenance
• Driver: Special driver seat

Customization Options #

SeatLayout Properties #

Seat Model Properties #

Screenshots #

Basic Layout #

With Selection #

Seat Info Modal #

Example App #

Check out the example app in the example/ directory for a complete implementation with configuration options.

cd example
flutter run

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog #

See CHANGELOG.md for a list of changes.