video_appbar 0.0.2+1

This package allows the creation of AppBar with customizable embedded videos.

VideoAppBar for Flutter

A Flutter package that allows playing videos within the AppBar, and customizing each of its components.

	Android	iOS	macOS	Web
Support	SDK 16+	12.0+	10.14+	Any*

Demo

Mobile - Android	Mobile - Android (with leading)

Tablet - Android

Installation

First, add video_appbar as a dependency in your pubspec.yaml file.

dependencies:
  video_appbar: ^0.0.1+2

Dependency

This package works using the video_player plugin. If you need any information about compatible formats or other details, you can visit the official documentation. Below are the necessary configurations for using internet-based videos:

iOS

If you need to access videos using http (rather than https) URLs, you will need to add the appropriate NSAppTransportSecurity permissions to your app's Info.plist file, located in <project root>/ios/Runner/Info.plist. See Apple's documentation to determine the right combination of entries for your use case and supported iOS versions.

Android

If you are using network-based videos, ensure that the following permission is present in your Android Manifest file, located in <project root>/android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

macOS

If you are using network-based videos, you will need to add the com.apple.security.network.client entitlement

Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: VideoAppBar(
            source: VideoAppBarSource.network(
              url: 'https://github.com/jorgemvv01/flutter_video_appbar/raw/main/example/res/video/video_01.mp4'
            ),
            height: 54,
            body: const Center(
              child: Text(
                'Video appbar body',
                style: TextStyle(
                  fontSize: 18,
                  color: Colors.white
                ),
              )
            ),
          ),
        )
      ),
    );
  }
}

Web - Sound behavior

On the Web, videos that autoplay will always start muted by default due to browser policies.
To allow the user to enable sound, VideoAppBar includes by default a button that appears when running on Web.

• By default, showWebUnmuteButton is set to true.
• This shows a floating button that lets the user toggle sound on/off.

If you want to customize this button, you can provide your own widget via unmuteButtonBuilder:

VideoAppBar(
  source: VideoAppBarSource.network(
    url: 'https://github.com/jorgemvv01/flutter_video_appbar/raw/main/example/res/video/video_01.mp4'
  ),
  volume: 1,
  showWebUnmuteButton: true, // default is true
  unmuteButtonBuilder: (context, isMuted, onPressed) {
    return ElevatedButton.icon(
      onPressed: onPressed,
      icon: Icon(isMuted ? Icons.volume_off : Icons.volume_up),
      label: Text(isMuted ? 'Activate' : 'Mute'),
      style: ElevatedButton.styleFrom(
        shape: StadiumBorder(),
        elevation: 4,
      ),
    );
  },
  body: const Center(
    child: Text(
      'Custom unmute button on Web',
      style: TextStyle(fontSize: 18, color: Colors.white),
    ),
  ),
)

Acknowledgements

The images and videos for the demo showcasing the package functionality were taken from the official valorant page.