Ticketcher

https://pub.dev/packages/ticketcher
Admin
Ticketcher is a powerful Flutter package for creating beautiful, customizable ticket-style cards...
Tokens:10,961
Snippets:114
Trust Score:9.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Watermark Positioning Options

Source: https://pub.dev/packages/ticketcher

Shows available alignment options for watermarks and an example of custom positioning using an offset.

```dart
WatermarkAlignment.topLeft
WatermarkAlignment.topCenter
WatermarkAlignment.topRight
WatermarkAlignment.centerLeft
WatermarkAlignment.center
WatermarkAlignment.centerRight
WatermarkAlignment.bottomLeft
WatermarkAlignment.bottomCenter
WatermarkAlignment.bottomRight
```

```dart
TicketWatermark.text(
  text: 'SAMPLE',
  alignment: WatermarkAlignment.bottomRight,
  offset: Offset(-20, -20), // 20 pixels from bottom and right edges
)
```

--------------------------------

### Radial Gradient Background Example

Source: https://pub.dev/packages/ticketcher/changelog

Shows how to use a radial gradient for a ticket section's background. Customize colors and gradient stops as needed.

```dart
Section(
  // ... other properties
  gradient: RadialGradient(
    colors: [Colors.yellow, Colors.orange],
    center: Alignment.center,
    radius: 1.0,
  ),
)
```

--------------------------------

### Global Ticket Background Image Example

Source: https://pub.dev/packages/ticketcher/changelog

Applies a background image to the entire ticket. Use `backgroundImageFit` to control how the image scales and `backgroundImageOpacity` for transparency.

```dart
TicketcherDecoration(
  // ... other properties
  backgroundImage: NetworkImage('https://example.com/ticket_background.png'),
  backgroundImageFit: BoxFit.cover,
  backgroundImageOpacity: 0.5,
)
```

--------------------------------

### MyHomePage Widget Definition

Source: https://pub.dev/packages/ticketcher/example

The main page of the application, displaying a grid of available examples using GridView.builder.

```dart
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Ticketcher Examples')),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          childAspectRatio: 1.1,
        ),
        padding: const EdgeInsets.all(16),
        itemCount: examples.length,
        itemBuilder: (context, index) {
          return _buildExampleCard(context, examples[index]);
        },
      ),
    );
  }

  Widget _buildExampleCard(BuildContext context, ExampleItem example) {
    return Card(
      child: InkWell(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => example.page),
          );
        },
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(example.icon, size: 32, color: Colors.deepPurple),
                  const Icon(Icons.arrow_forward_ios, size: 16),
                ],
              ),
              const SizedBox(height: 8),
              Text(
                example.title,
                style: const TextStyle(fontWeight: FontWeight.w500),
              ),
              if (example.subtitle != null) ...[
                const SizedBox(height: 4),
                Text(
                  example.subtitle!,
                  style: const TextStyle(fontSize: 12, color: Colors.grey),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Sweep Gradient Background Example

Source: https://pub.dev/packages/ticketcher/changelog

Illustrates the implementation of a sweep gradient for section backgrounds. Useful for creating circular or fan-like gradient effects.

```dart
Section(
  // ... other properties
  gradient: SweepGradient(
    colors: [Colors.red, Colors.green, Colors.blue, Colors.red],
    startAngle: 0.0,
    endAngle: 3 * 3.14159 / 2,
  ),
)
```

--------------------------------

### Linear Gradient Background Example

Source: https://pub.dev/packages/ticketcher/changelog

Demonstrates how to apply a linear gradient background to a ticket section. Ensure the gradient property is set within the Section model.

```dart
Section(
  // ... other properties
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
)
```

--------------------------------

### Blur Effect Example (Backdrop)

Source: https://pub.dev/packages/ticketcher/changelog

Implements a backdrop blur effect, blurring the content behind the ticket. Configure intensity using `sigma` and overlay with `tintColor` and `opacity`.

```dart
TicketcherDecoration(
  // ... other properties
  blurEffect: BlurEffect.backdrop(
    sigma: 10.0,
    tintColor: Colors.white.withOpacity(0.2),
    opacity: 0.8,
  ),
)
```

--------------------------------

### Define Example Items for Ticketcher Showcase

Source: https://pub.dev/packages/ticketcher/example

This Dart code defines a list of `ExampleItem` objects, each representing a different showcase for the Ticketcher Flutter package. Each item includes an icon, title, optional subtitle, and the corresponding widget for the showcase.

```dart
import 'package:example/show_cases/advanced_dividers_showcase.dart';
import 'package:example/show_cases/animation_showcase.dart';
import 'package:example/show_cases/blur_effect_showcase.dart';
import 'package:example/show_cases/colored_ticket.dart';
import 'package:example/show_cases/flight.dart';
import 'package:example/show_cases/flight_multi_section.dart';
import 'package:example/show_cases/gradient_border_ticket.dart';
import 'package:example/show_cases/gradient_card.dart';
import 'package:example/show_cases/gradient_variations.dart';
import 'package:example/show_cases/hologram_ticket.dart';
import 'package:example/show_cases/horizontal_ticket.dart';
import 'package:example/show_cases/image_background_showcase.dart';
import 'package:example/show_cases/interactive_ticket.dart';
import 'package:example/show_cases/notch_shapes_showcase.dart';
import 'package:example/show_cases/sales_offer.dart';
import 'package:example/show_cases/section_gradient_showcase.dart';
import 'package:example/show_cases/social_media.dart';
import 'package:example/show_cases/stacked_ticket.dart';
import 'package:example/show_cases/watermark_showcase.dart';
import 'package:flutter/material.dart';
import 'show_cases/circle_divider.dart';
import 'show_cases/wave_divider.dart';
import 'show_cases/smooth_wave_divider.dart';

class ExampleItem {
  final IconData icon;
  final String title;
  final String? subtitle;
  final Widget page;

  const ExampleItem({
    required this.icon,
    required this.title,
    required this.page,
    this.subtitle,
  });
}

final List<ExampleItem> examples = [
  // New Features v1.0.0
  ExampleItem(
    icon: Icons.change_history,
    title: 'Notch Shapes',
    subtitle: 'Circle, triangle, square, diamond',
    page: const NotchShapesShowcase(),
  ),
  ExampleItem(
    icon: Icons.content_cut,
    title: 'Advanced Dividers',
    subtitle: 'Tear lines & gradient dividers',
    page: const AdvancedDividersShowcase(),
  ),
  ExampleItem(
    icon: Icons.animation,
    title: 'Animations',
    subtitle: 'Fade, slide, scale, flip',
    page: const AnimationShowcase(),
  ),
  ExampleItem(
    icon: Icons.format_color_fill,
    title: 'Section Gradients',
    subtitle: 'Gradient backgrounds for sections',
    page: const SectionGradientShowcase(),
  ),
  // Existing Features
  ExampleItem(
    icon: Icons.blur_on,
    title: 'Blur Effects',
    subtitle: 'Glassmorphism & frosted glass',
    page: const BlurEffectShowcase(),
  ),
  ExampleItem(
    icon: Icons.image_outlined,
    title: 'Image Backgrounds',
    subtitle: 'Background images for tickets',
    page: const ImageBackgroundShowcase(),
  ),
  ExampleItem(
    icon: Icons.water_drop_outlined,
    title: 'Watermark Showcase',
    subtitle: 'Text watermarks with various effects',
    page: const WatermarkShowcase(),
  ),
  ExampleItem(
    icon: Icons.touch_app,
    title: 'Interactive Ticket',
    subtitle: 'Tap sections for interactions',
    page: const InteractiveTicket(),
  ),
  ExampleItem(
    icon: Icons.flight,
    title: 'Flight Card',
    page: const FlightCard(),
  ),
  ExampleItem(
    icon: Icons.flight_takeoff,
    title: 'Flight Card with Multiple Sections',
    page: const FlightCardMultiSection(),
  ),
  ExampleItem(
    icon: Icons.gradient_outlined,
    title: 'Gradient Card',
    page: const GradientCard(),
  ),
  ExampleItem(
    icon: Icons.border_color,
    title: 'Gradient Border Ticket',
    subtitle: 'Colorful gradient borders',
    page: const GradientBorderTicket(),
  ),
  ExampleItem(
    icon: Icons.auto_awesome,
    title: 'Holographic Ticket',
    page: const HologramTicket(),
  ),
  ExampleItem(
    icon: Icons.people_outline,
    title: 'Social Media Card',
    page: const SocialMedia(),
  ),
  ExampleItem(
    icon: Icons.local_offer_outlined,
    title: 'Sales Offer',
    page: const SalesOffer(),
  ),
  ExampleItem(
    icon: Icons.circle_outlined,
    title: 'Circle Divider',
    page: const CircleDivider(),
  ),
  ExampleItem(
    icon: Icons.waves,
    title: 'Wave Divider',
    page: const WaveDivider(),
  ),
  ExampleItem(
    icon: Icons.waves_outlined,
    title: 'Smooth Wave Divider',
    page: const SmoothWaveDivider(),
  ),
  ExampleItem(
    icon: Icons.receipt_long,
    title: 'Horizontal Ticket',
    page: const HorizontalTicket(),
  ),
  ExampleItem(
    icon: Icons.color_lens_outlined,
    title: 'Colored Sections Ticket',
    page: const ColoredTicket(),
  ),
  ExampleItem(
    icon: Icons.stacked_line_chart,
    title: 'Stacked Ticket',
    page: const StackedTicket(),
  ),
  ExampleItem(
    icon: Icons.gradient,
    title: 'Gradient Variations',
    page: const GradientVariations(),
  ),
];

void main() {

```

--------------------------------

### Sunset Gradient Border

Source: https://pub.dev/packages/ticketcher

Creates a sunset-themed gradient border. This example uses a LinearGradient with a defined begin and end alignment, and specific color stops.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.white,
    borderGradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFFFFD89B), Color(0xFFFF8A56), Color(0xFFFF6B6B)],
    ),
    borderWidth: 2.0,
  ),
)
```

--------------------------------

### Horizontal Ticketcher Example

Source: https://pub.dev/packages/ticketcher

Creates a horizontal ticket layout using the Ticketcher.horizontal constructor. Width factors can be used to control the relative widths of sections.

```dart
Ticketcher.horizontal(
  height: 160,
  sections: [
    Section(
      widthFactor: 1,
      child: Text('Left Section'),
    ),
    Section(
      widthFactor: 2,
      child: Text('Right Section'),
    ),
  ],
)

```

--------------------------------

### Blur Effect Example (Frosted Glass)

Source: https://pub.dev/packages/ticketcher/changelog

Applies a frosted glass effect, combining backdrop blur with a customizable tinted overlay. Adjust `sigma`, `tintColor`, and `opacity` for desired appearance.

```dart
TicketcherDecoration(
  // ... other properties
  blurEffect: BlurEffect.frosted(
    sigma: 5.0,
    tintColor: Colors.grey,
    opacity: 0.5,
  ),
)
```

--------------------------------

### Per-Section Background Image Example

Source: https://pub.dev/packages/ticketcher/changelog

Sets a background image for an individual section within a ticket. This overrides the global ticket background for that specific section.

```dart
Section(
  // ... other properties
  backgroundImage: AssetImage('assets/section_image.png'),
  backgroundImageFit: BoxFit.contain,
  backgroundImageOpacity: 0.8,
)
```

--------------------------------

### Soft Focus Gaussian Blur

Source: https://pub.dev/packages/ticketcher

Applies a soft focus Gaussian blur effect. This example uses BlurEffect.gaussian with a small sigma value for a subtle blur.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.white.withOpacity(0.8),
    blurEffect: BlurEffect.gaussian(sigma: 2.5),
    borderRadius: const TicketRadius(radius: 12),
  ),
)
```

--------------------------------

### Blur Effect Example (Gaussian)

Source: https://pub.dev/packages/ticketcher/changelog

Uses Gaussian blur to apply a blur effect directly to the ticket's content. The `sigma` property controls the blur intensity.

```dart
TicketcherDecoration(
  // ... other properties
  blurEffect: BlurEffect.gaussian(
    sigma: 8.0,
  ),
)
```

--------------------------------

### Run MyApp Widget

Source: https://pub.dev/packages/ticketcher/example

This is the entry point for the Flutter application, initiating the widget tree with MyApp.

```dart
runApp(const MyApp());
```

--------------------------------

### Configure pubspec.yaml

Source: https://pub.dev/packages/ticketcher/install

Manually add the dependency to your project's pubspec.yaml file.

```yaml
dependencies:
  ticketcher: ^1.2.0
```

--------------------------------

### Combine Background Images and Colors

Source: https://pub.dev/packages/ticketcher

Demonstrates how section-specific colors and images interact with global background decorations.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    // Global background image
    backgroundImage: NetworkImage('https://example.com/texture.jpg'),
    backgroundImageOpacity: 0.3,
  ),
  sections: [
    Section(
      // Section-specific solid color overlays the global image
      color: Colors.blue.withOpacity(0.7),
      child: Text('Section with Color'),
    ),
    Section(
      // Section-specific image overrides everything
      backgroundImage: AssetImage('assets/special.png'),
      child: Text('Section with Image'),
    ),
  ],
)
```

--------------------------------

### MyApp Widget Definition

Source: https://pub.dev/packages/ticketcher/example

Defines the root of the application's widget tree, setting up MaterialApp with basic theming and navigation.

```dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ticketcher Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}
```

--------------------------------

### Configure Global Ticket Background Image

Source: https://pub.dev/packages/ticketcher

Sets a background image for the entire ticket with specific fit, opacity, and alignment settings.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundImage: NetworkImage('https://example.com/image.jpg'),
    backgroundImageFit: BoxFit.cover,
    backgroundImageOpacity: 0.8,
    backgroundImageAlignment: Alignment.center,
  ),
  sections: [
    Section(child: Text('Section 1')),
    Section(child: Text('Section 2')),
  ],
)
```

--------------------------------

### Add ticketcher dependency

Source: https://pub.dev/packages/ticketcher/install

Use the Flutter CLI to add the package to your project.

```bash
$ flutter pub add ticketcher
```

--------------------------------

### Import ticketcher library

Source: https://pub.dev/packages/ticketcher/install

Include the package in your Dart files to access its functionality.

```dart
import 'package:ticketcher/ticketcher.dart';
```

--------------------------------

### Configure Blur Effects

Source: https://pub.dev/packages/ticketcher

Use BlurEffect to apply glassmorphism styles. Higher sigma values increase blur intensity.

```dart
// Custom blur effect with full control
BlurEffect(
  sigma: 10.0,                    // Blur intensity (0-30)
  style: BlurStyle.frosted,       // backdrop, frosted, or gaussian
  tintColor: Colors.white,        // Overlay color for frosted effect
  opacity: 0.2,                   // Overlay opacity (0.0-1.0)
)

// Available blur styles
BlurEffect.backdrop(sigma: 10.0)     // Blurs background content
BlurEffect.frosted(                  // Frosted glass with tint
  sigma: 15.0,
  tintColor: Colors.white,
  opacity: 0.15,
)
BlurEffect.gaussian(sigma: 5.0)      // Blurs ticket content
```

--------------------------------

### Use Flutter Widget as Watermark

Source: https://pub.dev/packages/ticketcher

Demonstrates how to use any Flutter widget, such as an Icon or Container, as a watermark. Note that widget watermarks do not support repeat functionality.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    watermark: TicketWatermark.widget(
      widget: Icon(
        Icons.verified,
        size: 80,
        color: Colors.blue,
      ),
      opacity: 0.2,
      alignment: WatermarkAlignment.center,
      rotation: 15,
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    watermark: TicketWatermark.widget(
      widget: Container(
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        decoration: BoxDecoration(
          color: Colors.amber.withOpacity(0.2),
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: Colors.amber, width: 2),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.star, color: Colors.amber, size: 16),
            SizedBox(width: 4),
            Text(
              'PREMIUM',
              style: TextStyle(
                color: Colors.amber,
                fontWeight: FontWeight.bold,
                fontSize: 12,
              ),
            ),
          ],
        ),
      ),
      opacity: 0.7,
      alignment: WatermarkAlignment.topRight,
      offset: Offset(-10, 10), // Custom positioning
    ),
  ),
)
```

--------------------------------

### Configure Per-Section Background Images

Source: https://pub.dev/packages/ticketcher

Applies unique background images to individual sections within a ticket.

```dart
Ticketcher(
  sections: [
    Section(
      backgroundImage: AssetImage('assets/section1.png'),
      backgroundImageFit: BoxFit.cover,
      backgroundImageOpacity: 0.9,
      child: Text('First Section'),
    ),
    Section(
      backgroundImage: NetworkImage('https://example.com/section2.jpg'),
      backgroundImageFit: BoxFit.contain,
      backgroundImageOpacity: 1.0,
      child: Text('Second Section'),
    ),
  ],
)
```

--------------------------------

### Basic Vertical Ticketcher

Source: https://pub.dev/packages/ticketcher

Demonstrates the basic usage of the Ticketcher widget in its default vertical orientation. Ensure sections are provided.

```dart
Ticketcher(
  sections: [
    Section(
      child: Text('First Section'),
    ),
    Section(
      child: Text('Second Section'),
    ),
  ],
)

```

--------------------------------

### Create Frosted Glass Effect

Source: https://pub.dev/packages/ticketcher

Implements a frosted glass effect using backdrop blur, a tinted overlay, and a border. Set backgroundColor to transparent for this effect.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.transparent,
    blurEffect: BlurEffect.frosted(
      sigma: 15.0,
      tintColor: Colors.white,
      opacity: 0.15,
    ),
    borderRadius: const TicketRadius(radius: 16),
    border: Border.all(
      color: Colors.white.withOpacity(0.2),
      width: 1.5,
    ),
  ),
)
```

--------------------------------

### Programmatic Animation Control with Controller

Source: https://pub.dev/packages/ticketcher

Manage animations programmatically using AnimatedTicketcherController. Instantiate the controller and pass it to the widget.

```dart
final controller = AnimatedTicketcherController();

AnimatedTicketcher(
  animation: TicketAnimation.fadeIn(),
  controller: controller,
  sections: [...],
)

// Programmatically control animations
controller.playEntry();
controller.playExit();
controller.flip(); // For flip animation with backSide
```

--------------------------------

### Watermark Styling with Opacity, Rotation, and Size

Source: https://pub.dev/packages/ticketcher

Customizes text watermark appearance using opacity, rotation, and TextStyle. Also demonstrates repeating text watermarks.

```dart
TicketWatermark.text(
  text: 'DRAFT',
  opacity: 0.15,        // Very subtle
  rotation: 30,         // Rotate 30 degrees
  alignment: WatermarkAlignment.center,
  style: TextStyle(
    fontSize: 64,
    fontWeight: FontWeight.w900,
    color: Colors.grey,
  ),
)
```

```dart
TicketWatermark.text(
  text: 'COPY',
  repeat: true,         // Repeat across ticket
  repeatSpacing: 50,    // Space between repetitions
  opacity: 0.1,
  rotation: 15,
)
```

--------------------------------

### Configure Ticket Border Patterns

Source: https://pub.dev/packages/ticketcher

Apply decorative shapes to the edges of the ticket using the TicketcherDecoration class.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    bottomBorderStyle: BorderPattern(
      shape: BorderShape.wave, // or sharp, arc
      height: 8.0,
      width: 20.0,
    ),
  ),
)
```

--------------------------------

### Configure Notch Shapes

Source: https://pub.dev/packages/ticketcher

Apply different geometric styles to the notches between ticket sections.

```dart
// Triangle notches
Ticketcher(
  decoration: TicketcherDecoration(
    notchStyle: NotchStyle.triangle(radius: 12.0),
  ),
  sections: [...],
)

// Square notches
Ticketcher(
  decoration: TicketcherDecoration(
    notchStyle: NotchStyle.square(radius: 10.0),
  ),
  sections: [...],
)

// Diamond notches
Ticketcher(
  decoration: TicketcherDecoration(
    notchStyle: NotchStyle.diamond(radius: 10.0),
  ),
  sections: [...],
)
```

--------------------------------

### Configure Ticket Dividers

Source: https://pub.dev/packages/ticketcher

Add and style dividers between ticket sections using various predefined styles and configurations.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider(
      color: Colors.grey,
      thickness: 1.0,
      style: DividerStyle.solid, // or dashed, circles, wave, smoothWave, dotted, doubleLine
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.solid(
      color: Colors.grey,
      thickness: 1.0,
      padding: 8.0, // Add padding on both sides
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.dashed(
      color: Colors.grey,
      thickness: 1.0,
      dashWidth: 10.0,
      dashSpace: 7.0,
      padding: 8.0, // Add padding on both sides
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.circles(
      color: Colors.grey,
      thickness: 2.0,
      circleRadius: 4.0,
      circleSpacing: 8.0,
      padding: 8.0, // Add padding on both sides
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.wave(
      color: Colors.grey,
      thickness: 2.0,
      waveHeight: 6.0,
      waveWidth: 12.0,
      padding: 8.0, // Add padding on both sides
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.smoothWave(
      color: Colors.grey,
      thickness: 2.0,
      waveHeight: 6.0,
      waveWidth: 12.0,
      padding: 8.0, // Add padding on both sides
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.dotted(
      color: Colors.grey,
      thickness: 2.0,
      dotSize: 2.0,
      dotSpacing: 8.0,
      padding: 8.0, // Add padding on both sides
    ),
  ),
)
```

--------------------------------

### Explicit Vertical Ticketcher

Source: https://pub.dev/packages/ticketcher

Shows how to explicitly create a vertical ticket layout using the Ticketcher.vertical constructor. This is equivalent to the default constructor.

```dart
Ticketcher.vertical(
  sections: [
    Section(
      child: Text('Top Section'),
    ),
    Section(
      child: Text('Bottom Section'),
    ),
  ],
)

```

--------------------------------

### Slide Up Animation for Ticketcher

Source: https://pub.dev/packages/ticketcher

Implement a slide-up entry animation using TicketAnimation.slideUp. Customize duration and curve.

```dart
AnimatedTicketcher(
  animation: TicketAnimation.slideUp(
    duration: Duration(milliseconds: 400),
    curve: Curves.easeOutCubic,
  ),
  sections: [...],
)
```

--------------------------------

### Apply Gradient Background to Ticketcher

Source: https://pub.dev/packages/ticketcher

Uses a LinearGradient to style the background of the ticket.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)
```

--------------------------------

### Gradient Solid Divider

Source: https://pub.dev/packages/ticketcher

Create a solid divider with a gradient background using TicketDivider.gradientSolid. Specify the gradient and thickness.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.gradientSolid(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.purple],
      ),
      thickness: 2.0,
    ),
  ),
  sections: [...],
)
```

--------------------------------

### Apply Linear Gradient Background to Sections

Source: https://pub.dev/packages/ticketcher

Use LinearGradient to create gradient backgrounds for individual sections within a Ticketcher. Specify begin, end, and colors for the gradient effect.

```dart
Ticketcher.horizontal(
  height: 120,
  sections: [
    Section(
      widthFactor: 1,
      gradient: const LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Color(0xFF667EEA), Color(0xFF764BA2)],
      ),
      child: Text('Gradient Section 1'),
    ),
    Section(
      widthFactor: 1,
      gradient: const LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
        colors: [Color(0xFFF093FB), Color(0xFFF5576C)],
      ),
      child: Text('Gradient Section 2'),
    ),
  ],
)
```

--------------------------------

### Apply Solid Color Background to Ticketcher

Source: https://pub.dev/packages/ticketcher

Sets a solid background color for the entire ticket using TicketcherDecoration.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.white,
  ),
)
```

--------------------------------

### Apply Colored Sections to Ticketcher

Source: https://pub.dev/packages/ticketcher

Overrides global background settings by applying specific colors to individual sections.

```dart
Ticketcher(
  sections: [
    Section(
      color: Colors.blue.shade100,
      child: Text('First Section'),
    ),
    Section(
      color: Colors.green.shade100,
      child: Text('Second Section'),
    ),
  ],
)
```

--------------------------------

### Apply Gradient Border to Ticketcher

Source: https://pub.dev/packages/ticketcher

Create gradient borders for a Ticketcher using `decoration.borderGradient` and `decoration.borderWidth`. Supports any Flutter gradient type.

```dart
// Linear gradient border
Ticketcher(
  decoration: TicketcherDecoration(
    borderGradient: LinearGradient(
      colors: [Colors.red, Colors.orange, Colors.yellow, Colors.green, Colors.blue],
    ),
    borderWidth: 3.0,
  ),
)

// Radial gradient border
Ticketcher(
  decoration: TicketcherDecoration(
    borderGradient: RadialGradient(
      colors: [Colors.purple, Colors.pink, Colors.orange],
    ),
    borderWidth: 2.5,
  ),
)

// Sweep gradient for rainbow effects
Ticketcher(
  decoration: TicketcherDecoration(
    borderGradient: SweepGradient(
      colors: [
        Colors.red, Colors.orange, Colors.yellow, Colors.green,
        Colors.blue, Colors.indigo, Colors.purple, Colors.red,
      ],
    ),
    borderWidth: 2.0,
  ),
)
```

--------------------------------

### Set Ticket Width

Source: https://pub.dev/packages/ticketcher

Define a fixed width for the ticket component.

```dart
Ticketcher(
  width: 300.0,
  // ... other properties
)
```

--------------------------------

### Apply Solid Color Border to Ticketcher

Source: https://pub.dev/packages/ticketcher

Add a solid color border to a Ticketcher using the `decoration.border` property with `Border.all`. Specify the color and width of the border.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    border: Border.all(
      color: Colors.grey,
      width: 1.0,
    ),
  ),
)
```

--------------------------------

### Apply Sweep Gradient Background to Sections

Source: https://pub.dev/packages/ticketcher

Implement SweepGradient for conical or sweep-through gradients in Ticketcher sections. Specify the center and a list of colors to create a rainbow or similar effect.

```dart
Ticketcher(
  sections: [
    Section(
      gradient: const SweepGradient(
        center: Alignment.center,
        colors: [
          Colors.red,
          Colors.orange,
          Colors.yellow,
          Colors.green,
          Colors.blue,
          Colors.red,
        ],
      ),
      child: Text('Rainbow Sweep'),
    ),
    Section(
      child: Text('Plain Section'),
    ),
  ],
)
```

--------------------------------

### Backdrop Blur with Gradient Background

Source: https://pub.dev/packages/ticketcher

Applies a backdrop blur effect with a semi-transparent gradient background. This configuration uses BlurEffect.backdrop and includes a smooth wave divider.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.white.withOpacity(0.05),
    blurEffect: BlurEffect.backdrop(sigma: 12.0),
    borderRadius: const TicketRadius(radius: 20),
    divider: TicketDivider.smoothWave(
      color: Colors.white.withOpacity(0.4),
      thickness: 2,
    ),
  ),
)
```

--------------------------------

### Configure Double Line Divider in Ticketcher

Source: https://pub.dev/packages/ticketcher

Applies a double line divider with custom thickness, spacing, and padding to a Ticketcher widget.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.doubleLine(
      color: Colors.grey,
      thickness: 1.5,
      lineSpacing: 4.0,
      padding: 8.0, // Add padding on both sides
    ),
  ),
)
```

--------------------------------

### Neon Cyber Gradient Border

Source: https://pub.dev/packages/ticketcher

Applies a vibrant neon cyber gradient border to the Ticketcher. Requires setting a LinearGradient with specific colors and a border width.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.black,
    borderGradient: LinearGradient(
      colors: [Color(0xFF00FFFF), Color(0xFF0080FF), Color(0xFF8000FF), Color(0xFFFF00FF)],
    ),
    borderWidth: 2.5,
    shadow: BoxShadow(
      color: Colors.cyan.withOpacity(0.5),
      blurRadius: 15,
      spreadRadius: 2,
    ),
  ),
)
```

--------------------------------

### Apply Radial Gradient Background to Sections

Source: https://pub.dev/packages/ticketcher

Utilize RadialGradient for circular gradient backgrounds in Ticketcher sections. Define the center, radius, and colors for the radial effect.

```dart
Ticketcher(
  sections: [
    Section(
      gradient: RadialGradient(
        center: Alignment.center,
        radius: 1.0,
        colors: [Colors.yellow, Colors.orange, Colors.red],
      ),
      child: Text('Radial Gradient'),
    ),
    Section(
      color: Colors.white,
      child: Text('Solid Color'),
    ),
  ],
)
```

--------------------------------

### Scale Animation for Ticketcher

Source: https://pub.dev/packages/ticketcher

Apply a scale/zoom animation using TicketAnimation.scale. Adjust duration and easing curve.

```dart
AnimatedTicketcher(
  animation: TicketAnimation.scale(
    duration: Duration(milliseconds: 300),
    curve: Curves.easeOutBack,
  ),
  sections: [...],
)
```

--------------------------------

### Gradient Overrides Solid Color Background

Source: https://pub.dev/packages/ticketcher

Demonstrates that a section-specific gradient takes precedence over a solid color when both are specified. The 'color' property is ignored if 'gradient' is present.

```dart
// Example: gradient overrides color
Section(
  color: Colors.red,  // This will be ignored
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
  ),
  child: Text('Gradient wins!'),
)
```

--------------------------------

### Implement Interactive Ticket Sections

Source: https://pub.dev/packages/ticketcher

Define sections within a Ticketcher widget, each with a custom child and an optional onTap callback for user interaction.

```dart
Ticketcher(
  sections: [
    Section(
      child: Text('Header Section'),
      onTap: () {
        print('Header tapped!');
        // Handle header tap
      },
    ),
    Section(
      child: Text('Content Section'),
      onTap: () {
        print('Content tapped!');
        // Handle content tap
      },
    ),
    Section(
      child: Container(
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(
          'TAP TO CHECK-IN',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      onTap: () {
        // Handle check-in action
        _performCheckIn();
      },
    ),
  ],
)
```

```dart
Ticketcher(
  sections: [
    Section(
      child: FlightHeader(),
      onTap: () => _showFlightDetails(),
    ),
    Section(
      child: FlightInfo(),
      onTap: () => _showRouteMap(),
    ),
    Section(
      child: CheckInButton(),
      onTap: () => _performCheckIn(),
    ),
  ],
)
```

```dart
Ticketcher.horizontal(
  height: 200,
  sections: [
    Section(
      widthFactor: 2,
      child: EventDetails(),
      onTap: () => _showEventInfo(),
    ),
    Section(
      child: QRCodeWidget(),
      onTap: () => _showQRCode(),
    ),
  ],
)
```

--------------------------------

### Add Ticketcher Dependency

Source: https://pub.dev/packages/ticketcher

Add the ticketcher package to your pubspec.yaml file to include it in your Flutter project.

```yaml
dependencies:
  ticketcher: ^1.2.0

```

--------------------------------

### Premium Frosted Glass Ticket

Source: https://pub.dev/packages/ticketcher

Implements a premium frosted glass effect using BlurEffect.frosted. This requires specifying sigma, tintColor, and opacity for the blur.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.transparent,
    blurEffect: BlurEffect.frosted(
      sigma: 15.0,
      tintColor: Colors.white,
      opacity: 0.1,
    ),
    borderRadius: const TicketRadius(radius: 16),
    border: Border.all(
      color: Colors.white.withOpacity(0.3),
      width: 1.5,
    ),
    shadow: BoxShadow(
      color: Colors.black.withOpacity(0.2),
      blurRadius: 20,
      offset: const Offset(0, 10),
    ),
  ),
)
```

--------------------------------

### Customize Section Padding

Source: https://pub.dev/packages/ticketcher

Define padding for individual sections within the ticket.

```dart
Ticketcher(
  sections: [
    Section(
      child: Text('First Section'),
      padding: EdgeInsets.all(16.0),
    ),
    Section(
      child: Text('Second Section'),
      padding: EdgeInsets.all(16.0),
    ),
  ],
)
```

--------------------------------

### Flip Animation for Double-Sided Tickets

Source: https://pub.dev/packages/ticketcher

Use TicketAnimation.flip for 3D flip animations on double-sided tickets. Control duration and curve.

```dart
AnimatedTicketcher(
  animation: TicketAnimation.flip(
    duration: Duration(milliseconds: 600),
    curve: Curves.easeInOut,
  ),
  sections: [...],
)
```

--------------------------------

### Fade In Animation for Ticketcher

Source: https://pub.dev/packages/ticketcher

Use AnimatedTicketcher with TicketAnimation.fadeIn for entry animations. Specify duration for control.

```dart
AnimatedTicketcher(
  animation: TicketAnimation.fadeIn(
    duration: Duration(milliseconds: 500),
  ),
  sections: [
    Section(child: Text('Section 1')),
    Section(child: Text('Section 2')),
  ],
)
```

--------------------------------

### Apply Backdrop Blur Effect

Source: https://pub.dev/packages/ticketcher

Applies a backdrop filter to blur content behind the ticket, keeping the ticket content sharp. Requires setting a background color and border radius.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.white.withOpacity(0.1),
    blurEffect: BlurEffect.backdrop(sigma: 10.0),
    borderRadius: const TicketRadius(radius: 16),
    shadow: BoxShadow(
      color: Colors.black.withOpacity(0.3),
      blurRadius: 20,
      offset: const Offset(0, 10),
    ),
  ),
)
```

--------------------------------

### Add Text Watermark to Ticketcher

Source: https://pub.dev/packages/ticketcher

Apply a text watermark to a Ticketcher using `decoration.watermark`. Customize text, opacity, alignment, rotation, and text style.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    watermark: TicketWatermark.text(
      text: 'CONFIDENTIAL',
      opacity: 0.3,
      alignment: WatermarkAlignment.center,
      rotation: 45, // Rotate 45 degrees
      style: TextStyle(
        fontSize: 32,
        fontWeight: FontWeight.bold,
        color: Colors.red,
      ),
    ),
  ),
)
```

--------------------------------

### Add Ticket Shadow

Source: https://pub.dev/packages/ticketcher

Apply a BoxShadow to the Ticketcher decoration to add depth.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    shadow: BoxShadow(
      color: Colors.black.withOpacity(0.2),
      blurRadius: 4.0,
      offset: Offset(0, 2),
    ),
  ),
)
```

--------------------------------

### Tear Line Divider Style

Source: https://pub.dev/packages/ticketcher

Implement a tear line divider using TicketDivider.tearLine. Customize scissors icon position and size.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.tearLine(
      color: Colors.grey,
      scissorsPosition: ScissorsPosition.start,
      scissorsSize: 16.0,
    ),
  ),
  sections: [...],
)
```

--------------------------------

### Adjust Notch Radius

Source: https://pub.dev/packages/ticketcher

Control the radius of the connecting notches between sections.

```dart
Ticketcher(
  notchRadius: 12.0,
  // ... other properties
)
```

--------------------------------

### Metallic Gold Gradient Border

Source: https://pub.dev/packages/ticketcher

Applies a metallic gold gradient border. This configuration includes a LinearGradient with multiple color stops and an optional shadow effect.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.white,
    borderGradient: LinearGradient(
      colors: [Color(0xFFFFD700), Color(0xFFFFA500), Color(0xFFFFD700), Color(0xFFB8860B)],
    ),
    borderWidth: 3.0,
    shadow: BoxShadow(
      color: Colors.amber.withOpacity(0.3),
      blurRadius: 8,
    ),
  ),
)
```

--------------------------------

### Apply Gaussian Blur Effect

Source: https://pub.dev/packages/ticketcher

Applies a Gaussian blur directly to the ticket's content for a soft focus effect. This requires specifying the sigma value for the blur intensity.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    backgroundColor: Colors.white.withOpacity(0.9),
    blurEffect: BlurEffect.gaussian(sigma: 3.0),
    borderRadius: const TicketRadius(radius: 12),
  ),
)
```

--------------------------------

### Gradient Dashed Divider

Source: https://pub.dev/packages/ticketcher

Apply a gradient to a dashed divider using TicketDivider.gradientDashed. Configure gradient, thickness, dash width, and dash space.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    divider: TicketDivider.gradientDashed(
      gradient: LinearGradient(
        colors: [Colors.orange, Colors.red],
      ),
      thickness: 1.5,
      dashWidth: 8.0,
      dashSpace: 4.0,
    ),
  ),
  sections: [...],
)
```

--------------------------------

### Apply Stacked Effect

Source: https://pub.dev/packages/ticketcher

Create a layered appearance for vertical tickets. This effect is ignored in horizontal tickets.

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    stackEffect: StackEffect(
      count: 2, // Number of stacked layers
      offset: 8.0, // Vertical offset between layers
      widthStep: 4.0, // Width reduction for each layer
      color: Colors.grey.withOpacity(0.2), // Color of the stacked layers
    ),
  ),
)
```

```dart
Ticketcher(
  decoration: TicketcherDecoration(
    stackEffect: StackEffect(
      count: 3,
      offset: 12.0,
      widthStep: 8.0,
      color: Colors.blue.withOpacity(0.1),
    ),
  ),
)
```
Tokens:
Raw