Flutter3.38.2实战 - 进阶仿写抖音直播+聊天+短视频App UI！

xiaoyan2015 的个人博客 / 13 / 0 / 创建于 13小时前

AI摘要

本文介绍了一个使用Flutter 3.38等技术栈仿制抖音App的开源项目，并提供了项目结构、核心代码和作者其他相关作品链接。这是一篇技术知识分享。

最新款原创Flutter3.38+Dart3.10+Getx+MediaKit仿制抖音App应用Flutter3DouYin。

技术栈

编辑器：VScode
技术框架：Flutter3.38.2+Dart3.10.0
路由状态管理：get: ^4.7.3
本地缓存服务：get_storage: ^2.1.1
瀑布流组件：flutter_staggered_grid_view^0.7.0
轮播图组件：card_swiper^3.0.1
toast弹窗组件：shirne_dialog^4.8.6
视频套件：media_kit: ^1.2.3

项目结构目录

使用最新跨平台框架Flutter3.38构建项目模板。

flutter3.38-dymall短视频直播聊天项目已经发布到我的原创作品集。
flutter3.38+dart3.10+getx实战直播+聊天+短视频App

项目入口main.dart

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,
        // 修复windows下字体不一致情况 - Web 平台特殊处理
        // fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null
        fontFamily: isWindows() ? 'Microsoft YaHei' : null
      ),
      home: const Layout(),
      // 初始化路由
      initialRoute: Common.isLogin() ? '/' : '/login',
      // 路由页面
      getPages: routePages,
      // 初始化弹窗key
      navigatorKey: MyDialog.navigatorKey,
    );
  }
}