flutter3.41.5实战抖音app直播+短视频+聊天基于flutter3.41.5+dart3.11从0-1仿写抖

flutter3.41.5+dart3.11从0-1仿写抖音短视频+直播+聊天app应用。

未标题-dd.png

Screenrecorder-2026-05-18-13-27-50-331 00_00_00-00_00_30.gif

短视频实现了类似抖音app首页全屏沉浸式顶部状态栏+tab菜单栏+底部菜单栏颜色联动效果，左右滑动切换页面模块，上下滑动切换短视频效果。

Screenrecorder-2026-05-18-13-29-57-299 00_00_00-00_00_30.gif

技术栈

跨平台框架：Flutter3.41.5+Dart3.11.3
路由状态管理：get: ^4.7.3
本地缓存服务：get_storage: ^2.1.1
视频套件：media_kit: ^1.2.6
瀑布流组件：flutter_staggered_grid_view^0.7.0
轮播图组件：card_swiper^3.0.1
toast弹窗组件：shirne_dialog^4.9.0
svg图片：flutter_svg: ^2.2.4
缓存网络图片：cached_network_image: ^3.4.1

未标题-14.png

Screenrecorder-2026-05-18-13-31-47-744 00_00_00-00_00_30.gif

项目框架目录

使用最新跨平台技术框架Flutter3.41.5搭建项目模板。

360截图20251202111840926.png

Screenrecorder-2026-05-18-13-32-23-605 00_00_00-00_00_30.gif

项目配置入口

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import 'package:media_kit/media_kit.dart';
import 'package:shirne_dialog/shirne_dialog.dart';

import 'utils/common.dart';

// 引入布局页面
import 'layouts/index.dart';

// 引入路由配置
import 'router/index.dart';

void main() async {
  // 初始化get_storage存储
  await GetStorage.init();

  // 初始化media_kit视频套件
  WidgetsFlutterBinding.ensureInitialized();
  MediaKit.ensureInitialized();

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // 是否windows平台
    bool isWindows() {
      if (kIsWeb) return false;
      
      final platform = Theme.of(context).platform;
      return platform == TargetPlatform.windows;
    }

    return GetMaterialApp(
      title: 'Flutter3 DYMALL',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFFF2C55)),
        useMaterial3: true,
        fontFamily: isWindows() ? 'Microsoft YaHei' : null
      ),
      home: const Layout(),
      // 初始化路由
      initialRoute: Common.isLogin() ? '/' : '/login',
      // 路由页面
      getPages: routePages,
    );
  }
}

flutter3实现短视频联动切换

004360截图20251201002757875.png

004360截图20251201004937786.png

004360截图20251201005252360.png

类似抖音上下滑动切换短视频、左右滑动切换页面模块效果。

f6d5d9016b765c8e3927602608ae7693_1289798-20251205232946737-697311119.png

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: scaffoldKey,
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      forceMaterialTransparency: true,
      backgroundColor: [0, 1, 4, 5].contains(videoModuleController.videoTabIndex.value) ? null : Colors.transparent,
      foregroundColor: [0, 1, 4, 5].contains(videoModuleController.videoTabIndex.value) ? Colors.black : Colors.white,
      titleSpacing: 1.0,
      leading: Obx(() => IconButton(
        icon: Badge.count(
          backgroundColor: Colors.red,
          count: 6,
          child: Icon(Icons.sort_rounded, color: tabColor(),),
        ),
        onPressed: () {
          // 自定义打开右侧drawer
          scaffoldKey.currentState?.openDrawer();
        },
      )),
      title: Obx(() {
        return ScrollConfiguration(
          behavior: CustomScrollBehavior().copyWith(scrollbars: false),
          child: TabBar(
            ...
          ),
        );
      }),
      actions: [
        Obx(() => IconButton(icon: Icon(Icons.search_rounded, color: tabColor(),), onPressed: () {},),),
      ],
    ),
    body: ScrollConfiguration(
      behavior: CustomScrollBehavior().copyWith(scrollbars: false),
      child: PageView(
        controller: pageController,
        onPageChanged: (index) {
          videoModuleController.updateVideoTabIndex(index);
          setState(() {
            tabController.animateTo(index, duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
          });
        },
        children: [
          ...tabModules
        ],
      ),
    ),
    // 侧边栏
    drawer: Drawer(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.horizontal(right: Radius.circular(15.0))),
      clipBehavior: Clip.antiAlias,
      width: 300,
      child: Container(
        ...
      ),
    ),
  );
}