How to Make Video Control Button Appear for 3 Seconds When Clicked in Flutter

When developing a video player application in Flutter, it’s important to provide a user-friendly interface that allows users to control playback. One common requirement is to display the video control buttons only when the user interacts with the video, and hide them after a certain period of time to avoid cluttering the screen. In this tutorial, we will learn how to implement this behavior in Flutter.

Prerequisites

Before we begin, make sure you have Flutter installed on your system and have set up a Flutter project. Basic knowledge of Flutter and Dart programming is also assumed.

Getting Started

To get started, let’s create a new Flutter project and navigate to the main.dart file. Replace the existing code with the following:

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

void main() {
  runApp(VideoPlayerApp());
}

class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player',
      theme: ThemeData.dark(),
      home: VideoPlayerScreen(),
    );
  }
}

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

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

  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;
  bool _showControls = false;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    )..initialize().then((_) {
        setState(() {
          _controller.play();
          _controller.setLooping(true);
        });
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          setState(() {
            _showControls = true;
            Future.delayed(const Duration(seconds: 3), () {
              setState(() {
                _showControls = false;
              });
            });
          });
        },
        child: Stack(
          children: [
            _controller.value.isInitialized
                ? VideoPlayer(_controller)
                : Container(),
            if (_showControls)
              Expanded(
                child: Container(
                  color: Colors.black54,
                  child: Center(
                    child: IconButton(
                      onPressed: () {
                        setState(() {
                          _controller.value.isPlaying
                              ? _controller.pause()
                              : _controller.play();
                        });
                      },
                      icon: Icon(
                        _controller.value.isPlaying
                            ? Icons.pause
                            : Icons.play_arrow,
                        color: Colors.white,
                        size: 50,
                      ),
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

In this code, we have created a basic Flutter application with a VideoPlayerScreen widget that displays a video player. We use the video_player package to handle video playback. The VideoPlayerController is initialized with a network video URL, which you should replace with your own video URL.

The video control buttons are wrapped in an Align widget and are displayed at the bottom of the screen. We use the _showControls boolean variable to conditionally show or hide the control buttons.

The GestureDetector is used to detect user taps on the video player. When a tap is detected, we set _showControls to true and start a timer using Future.delayed to hide the control buttons after 3 seconds.

Run the application using flutter run command and test the video player. You should see the control buttons appear when you tap on the video and disappear after 3 seconds of inactivity.

Congratulations! You have successfully implemented a video control button that appears for 3 seconds when clicked in Flutter. You can further enhance the video player by adding additional features such as seeking, fullscreen mode, and volume controls.

I hope you found this tutorial helpful. Happy coding!

Preview

control button disappears if not touched for 3 seconds (accelerated video)