video_shop_flutter 1.1.1 copy "video_shop_flutter: ^1.1.1" to clipboard
video_shop_flutter: ^1.1.1 copied to clipboard

A Flutter plugin to create shopping video widget like Tiktok and Youtube shorts.

Flutter Shopping Video: Create video player layout like tiktok.

Features #

Video player layout:

Getting started #

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

Example #

import 'package:example/service/service.dart';
import 'package:example/widgets/like_widget.dart';
import 'package:flutter/material.dart';
import 'package:video_shop_flutter/page/page.dart';

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

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

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  List<Map<String, dynamic>> data = [];
  ApiService service = ApiService();
  List<String> videoWatched = [];

  void initState() {

  void didChangeDependencies() async {
    List<Map<String, dynamic>> response = await service.mapData(1, 4);
    setState(() {
      data = response;

  Widget build(BuildContext context) {
    debugPrint("\n data length: ${data.length} \n");

    return Scaffold(
      body: VideoShopFlutter(
        // Called every time video page is changed.
        updateLastSeenPage: (lastSeenPageIndex) {},
        // Video data.
        listData: data,
        // Watched videos, it's updated every time new video is watched.
        videoWatched: videoWatched,
        pageSize: 4,
        enableBackgroundContent: true,
        // Load more video data.
        loadMore: (page, pageSize) async {
          // Just for test.
          debugPrint("load more...");
          debugPrint("Video $videoWatched");
          List<Map<String, dynamic>> newData =
              await service.mapData((page + 2), 4);
          if (newData.isNotEmpty) {
            setState(() {
              data = [, ...newData];
        // Your custom widget.
        likeWidget: (video, updateData) {
          return LikeWidget(
            likes: video?.likes ?? 0,
            liked: video?.liked ?? false,
            updateData: updateData,
            id: video?.id,

Note #

  • listData in VideoShopFlutter(listData: playList,)

    The listData is a list of Map, each Map is a Video object and video object required some field of data like this:

       'id': 123,
       'url': 'https://video.mp4'
       'thumbnail': 'https://thumbnail.jpg'
       'video_title': 'title',
       'description': 'description',
       'likes': 5 ,
       'liked': true,
       'product_name': 'productName',
       'product_permalink': 'productPermalink',
       'stock_status': 'stockStatus',

    Please follow above format data.

    The pageSize is size of list data every time load more data, it affects when to load more data.

    The loadMore is a function to load more data, it is called every time current PageView is at position: listData.length - (pageSize/2)

pub points



A Flutter plugin to create shopping video widget like Tiktok and Youtube shorts.

Repository (GitHub)
View/report issues


API reference




flutter, video_player, visibility_detector


Packages that depend on video_shop_flutter