> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fastpix.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fastpix.com/docs/_mcp/server.

# Complete integration example

> A full example showing how to set up the FastPix Flutter Player with video playback, configuration, and resource cleanup.

A full example showing how to set up the FastPix Flutter Player with video playback, configuration, and resource cleanup.

## Full app example

This example demonstrates a complete Flutter app with player initialization, playback, and cleanup:

```dart
import 'package:fastpix_player/fastpix_video_player.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fastpix Player Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const FastPixPlayerDemo(),
    );
  }
}

class FastPixPlayerDemo extends StatefulWidget {
  const FastPixPlayerDemo({super.key});

  @override
  State<FastPixPlayerDemo> createState() => _FastPixPlayerDemoState();
}

class _FastPixPlayerDemoState extends State<FastPixPlayerDemo> {
  late FastPixPlayerController controller;

  @override
  void initState() {
    super.initState();

    // Create HLS data source
    final dataSource = FastPixPlayerDataSource.hls(
      playbackId: 'your-playback-id-here',
      title: 'Sample HLS Stream',
      description: 'A sample HLS stream from FastPix',
      thumbnailUrl: 'https://www.example.com/thumbnail.jpg',
    );

    final configuration = FastPixPlayerConfiguration();
    controller = FastPixPlayerController();
    controller.initialize(dataSource: dataSource, configuration: configuration);
  }

  @override
  Widget build(BuildContext context) {
    return FastPixPlayer(
      controller: controller,
      width: 350,
      height: 200,
      aspectRatio: FastPixAspectRatio.ratio16x9,
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}
```

## Key points

* The `FastPixPlayerController` is created in `initState` and disposed in `dispose` to prevent memory leaks.
* `FastPixPlayerDataSource.hls()` constructs the data source using a playback ID. Optional fields include `title`, `description`, `thumbnailUrl`, `token`, `customDomain`, and `qualityControl`.
* `FastPixPlayerConfiguration()` uses default settings. Customize it with `controlsConfiguration`, `autoPlayConfiguration`, and `qualityConfiguration`.
* The `FastPixPlayer` widget renders the video. Set `width`, `height`, and `aspectRatio` to control the layout.

Replace `'your-playback-id-here'` with your actual FastPix playback ID.