Adaptive Ticket View

A customizable Flutter widget for creating beautiful ticket views with dynamic content and styling options.

Features

• 🎨 Customizable background and border colors
• 📱 Dynamic content area for any widget
• ✨ Optional bottom message and ticket code
• 🎯 Multiple line styles (dotted, solid, or none)
• 📐 Automatic height calculation
• 🎭 Beautiful ticket shape with cutouts

Visual Preview

Installation

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

dependencies:
  adaptive_ticket_view: ^0.0.1

Usage

Basic Usage

AdaptiveTicketView(
  ticketBgColor: Colors.blue[100]!,
  ticketBorderColor: Colors.blue,
  ticketInfoWidget: YourCustomContent(),
)

With Footer Content

AdaptiveTicketView(
  ticketBgColor: Colors.blue[100]!,
  ticketBorderColor: Colors.blue,
  ticketInfoWidget: YourCustomContent(),
  ticketBottomMessage: "Enjoy your journey!",
  ticketCode: "123456789",
)

Different Line Styles

// Dotted line (default)
AdaptiveTicketView(
  ticketBgColor: Colors.blue[100]!,
  ticketBorderColor: Colors.blue,
  lineStyle: TicketLineStyle.dotted,
  lineColor: Colors.blue,
  ticketInfoWidget: YourCustomContent(),
)

// Solid line
AdaptiveTicketView(
  ticketBgColor: Colors.green[100]!,
  ticketBorderColor: Colors.green,
  lineStyle: TicketLineStyle.solid,
  lineColor: Colors.green,
  ticketInfoWidget: YourCustomContent(),
)

// No line
AdaptiveTicketView(
  ticketBgColor: Colors.purple[100]!,
  ticketBorderColor: Colors.purple,
  lineStyle: TicketLineStyle.none,
  ticketInfoWidget: YourCustomContent(),
)

Complete Example with Flight Ticket

AdaptiveTicketView(
  ticketBgColor: const Color(0xffcaf0f8),
  ticketBorderColor: const Color(0xff00b4d8),
  lineStyle: TicketLineStyle.dotted,
  lineColor: const Color(0xff0077b6),
  ticketInfoWidget: Column(
    children: [
      Transform.rotate(
        angle: pi / 4,
        child: const Icon(
          Icons.flight,
          size: 45,
        ),
      ),
      const SizedBox(height: 8.0),
      const Text(
        "Wings of Wanderlust: Your Ticket to Adventure",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 16.0,
          fontWeight: FontWeight.w600,
          fontStyle: FontStyle.italic,
        ),
      ),
      const SizedBox(height: 4.0),
      const Text(
        "Embark on a journey of a lifetime!",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 12.0,
          fontWeight: FontWeight.w400,
        ),
      ),
      const SizedBox(height: 8.0),
      Container(
        padding: const EdgeInsets.symmetric(
          vertical: 8.0,
          horizontal: 12.0,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          border: Border.all(
            color: const Color(0xff0077b6),
          ),
        ),
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("New York"),
                Text("NYC"),
                Text("10:00 AM"),
              ],
            ),
            Column(
              children: [
                Text("Duration"),
                Text("13H 30M"),
              ],
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text("London"),
                Text("LDN"),
                Text("11:30 PM"),
              ],
            ),
          ],
        ),
      ),
    ],
  ),
  ticketBottomMessage: "May your flight be smooth, your adventures be thrilling!",
  ticketCode: "12132334MCFHGADH",
)

Parameters

Parameter	Type	Required	Description
ticketBgColor	Color	Yes	Background color of the ticket
ticketBorderColor	Color	Yes	Border color of the ticket
ticketInfoWidget	Widget?	No	Main content widget to be displayed in the ticket
ticketBottomMessage	String?	No	Optional message to be displayed at the bottom
ticketCode	String?	No	Optional ticket code to be displayed at the bottom
lineStyle	TicketLineStyle	No	Style of the separator line (dotted, solid, or none)
lineColor	Color	No	Color of the separator line

TicketLineStyle Enum

enum TicketLineStyle {
  /// No separator line
  none,
  /// Dotted separator line
  dotted,
  /// Solid separator line
  solid,
}

Example

Check out the example directory for a complete example of how to use this package. The example includes:

• Basic ticket view
• Different line styles
• Detailed flight ticket example
• Custom styling options

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.