flutter_awesome_reels 0.0.4

A powerful, customizable Flutter widget for creating TikTok/Instagram-style vertical video reels with advanced features like caching, analytics, and rich interactions.

Flutter Awesome Reels

A powerful and feature-rich Flutter package for creating Instagram/TikTok-like video reels with advanced streaming support including HLS, DASH, and MP4 formats.

⚠️ Breaking Changes

• Multi-Format Video Support: Now supports HLS, MPEG-DASH, and MP4 video sources. Update your video URLs and backend delivery as needed.
• New Event Callbacks: Added onPress and onLongPress event callbacks for advanced interaction handling. Update your widget usage to handle these events if needed.

Features

🎥 Video Streaming Support

• HLS (HTTP Live Streaming) - Adaptive bitrate streaming with excellent iOS support
• DASH (Dynamic Adaptive Streaming) - High-quality streaming with broad compatibility
• MP4 - Standard video format with universal support
• Auto-format selection - Intelligent format selection based on platform and network conditions
• Fallback support - Automatic fallback to alternative formats if primary format fails

📱 Platform Optimized

• iOS: Optimized for HLS streaming
• Android: Optimized for DASH streaming
• Web: Universal MP4 support
• Hardware acceleration support
• Picture-in-Picture mode

⚡ Performance Features

• Adaptive bitrate streaming for optimal quality based on network conditions
• Intelligent caching with configurable cache size and duration
• Video preloading for smooth playback experience
• Memory management with automatic controller cleanup
• Low latency streaming support for live content

🎨 UI/UX Features

• Instagram-like interface with familiar gestures
• Customizable progress indicators
• Shimmer loading effects
• Error handling with retry functionality
• Play/pause animations
• Double-tap to like with heart animation
• Long press to pause

🔧 Advanced Configuration

• Streaming quality control (bitrate limits, resolution)
• Subtitle and audio track selection
• DRM support for protected content
• Network timeout and retry configuration
• Custom error and loading widgets

Installation

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

dependencies:
  flutter_awesome_reels: ^0.0.3

Then run:

flutter pub get

Quick Start

Basic Usage

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

class MyReelsPage extends StatefulWidget {
  @override
  _MyReelsPageState createState() => _MyReelsPageState();
}

class _MyReelsPageState extends State<MyReelsPage> {
  late ReelController _controller;

  @override
  void initState() {
    super.initState();
    // Create reels with different streaming formats
    final reels = [
      ReelModel(
        id: '4',
        videoSource: VideoSource(
          url: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
        ),
        user: const ReelUser(
          id: 'u2',
          username: 'bob',
          displayName: 'Bob Builder',
          isFollowing: true,
        ),
        likesCount: 200,
        commentsCount: 30,
        sharesCount: 10,
        tags: ['adventure', 'travel'],
        audio: const ReelAudio(title: 'Adventure Tune'),
        duration: const Duration(seconds: 20),
        isLiked: true,
        views: 2500,
        location: 'Mountains',
      ),
      ReelModel(
        id: '1',
        videoSource: VideoSource(
          url: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8',
        ),
        user: const ReelUser(
          id: 'u3',
          username: 'charlie',
          displayName: 'Charlie Chaplin',
        ),
        likesCount: 4325,
        commentsCount: 45,
        sharesCount: 20,
        tags: ['comedy', 'classic'],
        audio: const ReelAudio(title: 'Classic Comedy'),
        duration: const Duration(seconds: 15),
        isLiked: false,
        views: 5000,
        location: 'Hollywood',
      ),
      ReelModel(
        id: '3',
        videoSource: VideoSource(
          url: 'https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4',
        ),
        user: const ReelUser(
          id: 'u1',
          username: 'alice',
          displayName: 'Alice in Wonderland',
        ),
        likesCount: 120,
        commentsCount: 15,
        sharesCount: 5,
        tags: ['fun', 'bunny'],
        audio: const ReelAudio(title: 'Sample Music'),
        duration: const Duration(seconds: 10),
        isLiked: false,
        views: 1000,
        location: 'Wonderland',
      ),
    ];
    _controller = ReelController();
    _controller.initialize(reels: reels, config: ReelConfig());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AwesomeReels(
        reels: _controller.reels,
        controller: _controller,
        config: ReelConfig(
          showDownloadButton: false,
          enablePullToRefresh: true,
        ),
        onReelChanged: (index) {
          debugPrint('Reel changed to index: $index');
        },
        onReelLiked: (reel) {
          _showSnackBar(
              '[${reel.isLiked ? 'Liked' : 'Unliked'} ${reel.user?.displayName}\'s reel');
        },
        onReelShared: (reel) {
          _showSnackBar('Shared ${reel.user?.displayName}\'s reel');
        },
        onReelCommented: (reel) {
          // Show comment dialog or navigate to comments page
        },
        onUserFollowed: (user) {
          _showSnackBar(
              '${user.isFollowing ? 'Following' : 'Unfollowed'} ${user.displayName}');
        },
        onUserBlocked: (user) {
          _showSnackBar('Blocked ${user.displayName}');
        },
        onVideoCompleted: (reel) {
          debugPrint('Video completed: ${reel.id}');
        },
        onVideoError: (reel, error) {
          _showSnackBar('Error playing video: $error');
        },
        // New event callbacks
        onPress: (reel) {
          debugPrint('Pressed: ${reel.id}');
        },
        onLongPress: (reel) {
          debugPrint('Long pressed: ${reel.id}');
        },
      ),
    );
  }

  void _showSnackBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: const Duration(seconds: 2),
        backgroundColor: Colors.grey[800],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Advanced Streaming Configuration

// Create a reel with multiple format support
final multiFormatReel = ReelModel(
  id: 'multi_1',
  videoSource: VideoSource(
    format: VideoFormat.hls, // Primary format
    urls: {
      VideoFormat.hls: 'https://example.com/video.m3u8',
      VideoFormat.dash: 'https://example.com/video.mpd',
      VideoFormat.mp4: 'https://example.com/video.mp4',
    },
  ),
  thumbnailUrl: 'https://example.com/thumb.jpg',
  duration: Duration(minutes: 3),
  user: ReelUser(
    id: 'user1',
    username: 'creator',
    profilePictureUrl: 'https://example.com/avatar.jpg',
  ),
  caption: 'Multi-format video with fallback support',
);

// Advanced streaming configuration
final streamingConfig = StreamingConfig(
  preferredFormat: PreferredStreamingFormat.hls,
  enableAdaptiveBitrate: true,
  enableLowLatency: false,
  maxBitrate: 5000000, // 5 Mbps
  minBitrate: 500000,  // 500 Kbps
  enableSubtitleSelection: true,
  enableAudioTrackSelection: true,
  enableQualitySelection: true,
  enableFallback: true,
  fallbackFormats: [VideoFormat.dash, VideoFormat.mp4],
  networkTimeout: Duration(seconds: 30),
  maxRetryAttempts: 3,
  enableDRM: false,
);

final config = ReelConfig(
  enableCaching: true,
  cacheConfig: CacheConfig(
    maxCacheSize: 500 * 1024 * 1024, // 500MB
    maxCacheAge: Duration(days: 7),
  ),
  videoPlayerConfig: VideoPlayerConfig(
    useBetterPlayer: true,
    enableHardwareAcceleration: true,
    enablePictureInPicture: true,
    streamingConfig: streamingConfig,
  ),
  preloadConfig: PreloadConfig(
    preloadCount: 2,
    preloadRadius: 1,
  ),
);

Streaming Formats

HLS (HTTP Live Streaming)

• Best for: iOS devices, adaptive streaming
• Features: Automatic quality adjustment, low latency options
• File extension: .m3u8
• Platform support: Excellent on iOS, good on Android/Web

ReelModel.hls(
  id: 'hls_video',
  hlsUrl: 'https://example.com/playlist.m3u8',
  // ... other properties
);

DASH (Dynamic Adaptive Streaming)

• Best for: Android devices, high-quality streaming
• Features: Superior compression, wide codec support
• File extension: .mpd
• Platform support: Excellent on Android, good on Web

ReelModel.dash(
  id: 'dash_video',
  dashUrl: 'https://example.com/manifest.mpd',
  // ... other properties
);

MP4 (Standard Video)

• Best for: Universal compatibility, simple implementation
• Features: Wide support, easy to implement
• File extension: .mp4
• Platform support: Universal

ReelModel.mp4(
  id: 'mp4_video',
  mp4Url: 'https://example.com/video.mp4',
  // ... other properties
);

Configuration Options

ReelConfig

Property	Type	Default	Description
enableCaching	bool	true	Enable video caching
cacheConfig	CacheConfig	CacheConfig()	Cache configuration
preloadConfig	PreloadConfig	PreloadConfig()	Video preloading settings
videoPlayerConfig	VideoPlayerConfig	VideoPlayerConfig()	Video player configuration
progressIndicatorConfig