基于Flutter3+bitsdojo_window+Getx桌面端仿微信EXE

置顶 已于 2024-03-02 09:59:53 修改
阅读量1.3k 收藏 18
点赞数 24
分类专栏： flutter3+dart3 flutter/dart实例 文章标签： flutter3+dart3 flutter-winchat flutter3桌面聊天 flutter3桌面端开发 flutter3仿微信
于 2024-03-02 09:55:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanxinyun1990/article/details/136410049
版权

经过接近一个月的爆肝开发，flutter3.x桌面端仿微信聊天项目完结啦！

基于flutter3+dart3+bitsdojo_window+get+media_kit等技术架构全新研发原创的Flutter3客户端聊天实战项目。实现了消息/emoj混合、图片/视频预览、红包、通讯录、收藏/朋友圈及小视频等功能。

在这里插入图片描述

技术栈

  • 编辑器：vscode
  • 窗口管理器：bitsdojo_window: ^0.1.6
  • 系统托盘：system_tray: ^2.0.3
  • 路由/状态管理：get: ^4.6.6
  • 存储服务：get_storage: ^2.1.1
  • 图片预览：photo_view: ^0.14.0
  • 网址预览：url_launcher: ^6.2.4
  • 视频组件：media_kit: ^1.1.10+1
  • 文件选择器：file_picker: ^6.1.1

在这里插入图片描述
在这里插入图片描述
flutter3_winchat 采用 bitsdojo_window 进行窗口管理。支持无边框窗口、自定义窗口尺寸及右上角系统操作栏。

在这里插入图片描述

项目结构目录

通过 flutter create app_project 命令创建一个新项目模板。

在这里插入图片描述
通过 flutter run -d window 命令，运行项目到windows系统。

在这里插入图片描述
在这里插入图片描述
FlutterWinchat项目采用 bitsdojo_window 插件来管理窗口。支持无边框窗口，自定义窗口尺寸，自定义右上角系统操作按钮(最大化/最小化/关闭)。

https://pub-web.flutter-io.cn/packages/bitsdojo_window

通过 system_tray 插件生成任务栏系统托盘图标。

在这里插入图片描述

https://pub-web.flutter-io.cn/packages/system_tray

在这里插入图片描述

flutter入口main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import 'package:media_kit/media_kit.dart';
import 'package:system_tray/system_tray.dart';

import 'utils/index.dart';

// 引入公共样式
import 'styles/index.dart';

// 引入公共布局模板
import 'layouts/index.dart';

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

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

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

  initSystemTray();

  runApp(const MyApp());

  // 初始化bitsdojo_window窗口
  doWhenWindowReady(() {
    appWindow.size = const Size(850, 620);
    appWindow.minSize = const Size(700, 500);
    appWindow.alignment = Alignment.center;
    appWindow.title = 'Flutter3-WinChat';
    appWindow.show();
  });
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'FLUTTER3 WINCHAT',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: FStyle.primaryColor,
        useMaterial3: true,
        // 修正windows端字体粗细不一致
        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
      ),
      home: const Layout(),
      // 初始路由
      initialRoute: Utils.isLogin() ? '/index' :'/login',
      // 路由页面
      getPages: routes,
      onInit: () {},
      onReady: () {},
    );
  }
}

// 创建系统托盘图标
Future<void> initSystemTray() async {
  String trayIco = 'assets/images/tray.ico';
  SystemTray systemTray = SystemTray();

  // 初始化系统托盘
  await systemTray.initSystemTray(
    title: 'system-tray',
    iconPath: trayIco,
  );

  // 右键菜单
  final Menu menu = Menu();
  await menu.buildFrom([
    MenuItemLabel(label: 'show', onClicked: (menuItem) => appWindow.show()),
    MenuItemLabel(label: 'hide', onClicked: (menuItem) => appWindow.hide()),
    MenuItemLabel(label: 'close', onClicked: (menuItem) => appWindow.close()),
  ]);
  await systemTray.setContextMenu(menu);

  // 右键事件
  systemTray.registerSystemTrayEventHandler((eventName) {
    debugPrint('eventName: $eventName');
    if (eventName == kSystemTrayEventClick) {
      Platform.isWindows ? appWindow.show() : systemTray.popUpContextMenu();
    } else if (eventName == kSystemTrayEventRightClick) {
      Platform.isWindows ? systemTray.popUpContextMenu() : appWindow.show();
    }
  });
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flutter自定义系统最小化/最大化/关闭

在这里插入图片描述
在这里插入图片描述

@override
Widget build(BuildContext context){
  return Row(
    children: [
      Container(
        child: widget.leading,
      ),
      Visibility(
        visible: widget.minimizable,
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: SizedBox(
            width: 32.0,
            height: 36.0,
            child: MinimizeWindowButton(colors: buttonColors, onPressed: handleMinimize,),
          )
        ),
      ),
      Visibility(
        visible: widget.maximizable,
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: SizedBox(
            width: 32.0,
            height: 36.0,
            child: isMaximized ? 
            RestoreWindowButton(colors: buttonColors, onPressed: handleMaxRestore,)
            : 
            MaximizeWindowButton(colors: buttonColors, onPressed: handleMaxRestore,),
          ),
        ),
      ),
      Visibility(
        visible: widget.closable,
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: SizedBox(
            width: 32.0,
            height: 36.0,
            child: CloseWindowButton(colors: closeButtonColors, onPressed: handleExit,),
          ),
        ),
      ),
      Container(
        child: widget.trailing,
      ),
    ],
  );
}

// 最小化
void handleMinimize() {
  appWindow.minimize();
}
// 设置最大化/恢复
void handleMaxRestore() {
  appWindow.maximizeOrRestore();
}
// 关闭
void handleExit() {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        content: const Text('是否最小化至托盘，不退出程序？', style: TextStyle(fontSize: 16.0),),
        backgroundColor: Colors.white,
        surfaceTintColor: Colors.white,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0)),
        elevation: 3.0,
        actionsPadding: const EdgeInsets.all(15.0),
        actions: [
          TextButton(
            onPressed: () {
              Get.back();
              appWindow.close();
            },
            child: const Text('退出', style: TextStyle(color: Colors.red),)
          ),
          TextButton(
            onPressed: () {
              Get.back();
              appWindow.hide();
            },
            child: const Text('最小化至托盘', style: TextStyle(color: Colors.deepPurple),)
          ),
        ],
      );
    }
  );
}

flutter通过内置的 WidgetsBindingObserver 类来监测窗口变化。

class _WinbtnState extends State<Winbtn> with WidgetsBindingObserver {
  // 是否最大化
  bool isMaximized = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  // 监听窗口尺寸变化
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        isMaximized = appWindow.isMaximized;
      });
    });
  }

  // ...
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

flutter3-winchat公共布局模板

在这里插入图片描述
项目整体参考了微信桌面端UI界面。

在这里插入图片描述

class Layout extends StatefulWidget {
  const Layout({
    super.key,
    this.activitybar = const Activitybar(),
    this.sidebar,
    this.workbench,
    this.showSidebar = true,
  });

  final Widget? activitybar; // 左侧操作栏
  final Widget? sidebar; // 侧边栏
  final Widget? workbench; // 右侧工作面板
  final bool showSidebar; // 是否显示侧边栏

  @override
  State<Layout> createState() => _LayoutState();
}

布局模板分为左中右大模块。采用Flex组件进行布局样式。

return Scaffold(
  backgroundColor: Colors.grey[100],
  body: Flex(
    direction: Axis.horizontal,
    children: [
      // 左侧操作栏
      MoveWindow(
        child: widget.activitybar,
        onDoubleTap: () => {},
      ),
      // 侧边栏
      Visibility(
        visible: widget.showSidebar,
        child: SizedBox(
          width: 270.0,
          child: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color(0xFFEEEBE7), Color(0xFFEEEEEE)
                ]
              ),
            ),
            child: widget.sidebar,
          ),
        ),
      ),
      // 主体容器
      Expanded(
        child: Column(
          children: [
            WindowTitleBarBox(
              child: Row(
                children: [
                  Expanded(
                    child: MoveWindow(),
                  ),
                  // 右上角操作按钮组
                  Winbtn(
                    leading: Row(
                      children: [
                        IconButton(onPressed: () {}, icon: const Icon(Icons.auto_fix_high), iconSize: 14.0,),
                        IconButton(
                          onPressed: () {
                            setState(() {
                              winTopMost = !winTopMost;
                            });
                          },
                          tooltip: winTopMost ? '取消置顶' : '置顶',
                          icon: const Icon(Icons.push_pin_outlined),
                          iconSize: 14.0,
                          highlightColor: Colors.transparent, // 点击水波纹颜色
                          isSelected: winTopMost ? true : false, // 是否选中
                          style: ButtonStyle(
                            visualDensity: VisualDensity.compact,
                            backgroundColor: MaterialStateProperty.all(winTopMost ? Colors.grey[300] : Colors.transparent),
                            shape: MaterialStatePropertyAll(
                              RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0))
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            // 右侧工作面板
            Expanded(
              child: Container(
                child: widget.workbench,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

在这里插入图片描述
使用 NavigationRail 组件实现Tab切换功能。该组件支持自定义头部和尾部组件。

// 索引
int tabCur = 0;
Map tabRoute = {
  0: {'path': '/index', 'pathMatch': ['/index', '/chat']}, // 聊天
  1: {'path': '/contact', 'pathMatch': ['/contact', '/addfriends', '/newfriends', '/uinfo']}, // 通讯录
  2: {'path': '/favor', 'pathMatch': ['/favor']}, // 收藏
  3: {'path': '/fzone', 'pathMatch': ['/fzone', '/publish']}, // 朋友圈
  4: {'path': '/fvideo', 'pathMatch': ['/fvideo']}, // 短视频
};
// tabs选项
List tabNavs = [
  NavigationRailDestination(
    icon: Stack(
      alignment: const Alignment(3.0, -1.5),
      children: [
        const Icon(Icons.wechat),
        FStyle.badge(11)
      ],
    ),
    label: const Text('聊天'),
  ),
  const NavigationRailDestination(
    icon: Icon(Icons.group_outlined),
    label: Text('通讯录'),
  ),
  const NavigationRailDestination(
    icon: Icon(Icons.folder_zip_outlined),
    label: Text('收藏'),
  ),
  NavigationRailDestination(
    icon: Stack(
      alignment: const Alignment(3.0, -1.5),
      children: [
        const Icon(Icons.camera),
        FStyle.badge(3)
      ],
    ),
    label: const Text('朋友圈'),
  ),
  NavigationRailDestination(
    icon: Stack(
      alignment: const Alignment(1.5, -1.0),
      children: [
        const Icon(Icons.play_circle),
        FStyle.badge(0, isdot: true)
      ],
    ),
    label: const Text('短视频')
  )
];

@override
Widget build(BuildContext context) {
  return Container(
    width: 54.0,
    decoration: const BoxDecoration(
      color: Color(0xFF2E2E2E),
    ),
    child: NavigationRail(
      backgroundColor: Colors.transparent,
      labelType: NavigationRailLabelType.none, // all 显示图标+标签 selected 只显示激活图标+标签 none 不显示标签
      indicatorColor: Colors.transparent, // 去掉选中椭圆背景
      indicatorShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(0.0),
      ),
      unselectedIconTheme: const IconThemeData(color: Color(0xFF979797), size: 24.0),
      selectedIconTheme: const IconThemeData(color: Color(0xFF07C160), size: 24.0,),
      unselectedLabelTextStyle: const TextStyle(color: Color(0xFF979797),),
      selectedLabelTextStyle: const TextStyle(color: Color(0xFF07C160),),
      // 头部(图像)
      leading: GestureDetector(
        onPanStart: (details) => {},
        child: Container(
          margin: const EdgeInsets.only(top: 30.0, bottom: 10.0),
          child: InkWell(
            child: Image.asset('assets/images/avatar/uimg1.jpg', height: 36.0, width: 36.0,),
            onTapDown: (TapDownDetails details) {
              cardDX = details.globalPosition.dx;
              cardDY = details.globalPosition.dy;
            },
            onTap: () {
              showCardDialog(context);
            },
          ),
        ),
      ),
      // 尾部(链接)
      trailing: Expanded(
        child: Container(
          margin: const EdgeInsets.only(bottom: 10.0),
          child: GestureDetector(
            onPanStart: (details) => {},
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                IconButton(icon: Icon(Icons.info_outline, color: Color(0xFF979797), size: 24.0), onPressed:(){showAboutDialog(context);}),
                PopupMenuButton(
                  icon: const Icon(Icons.menu, color: Color(0xFF979797), size: 24.0,),
                  offset: const Offset(54.0, 0.0),
                  tooltip: '',
                  color: const Color(0xFF353535),
                  surfaceTintColor: Colors.transparent,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0)),
                  padding: EdgeInsets.zero,
                  itemBuilder: (BuildContext context) {
                    return <PopupMenuItem>[
                      popupMenuItem('我的私密空间', 0),
                      popupMenuItem('锁定', 1),
                      popupMenuItem('意见反馈', 2),
                      popupMenuItem('设置', 3),
                    ];
                  },
                  onSelected: (value) {
                    switch(value) {
                      case 0:
                        Get.toNamed('/my');
                        break;
                      case 3:
                        Get.toNamed('/setting');
                        break;
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
      selectedIndex: tabCur,
      destinations: [
        ...tabNavs
      ],
      onDestinationSelected: (index) {
        setState(() {
          tabCur = index;
          if(tabRoute[index] != null && tabRoute[index]?['path'] != null) {
            Get.toNamed(tabRoute[index]['path']);
          }
        });
      },
    ),
  );
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flutter3小视频功能

flutter-winchat项目采用 media_kit 进行视频播放操作。

在这里插入图片描述

// flutter3短视频模板  Q：282310962

Container(
  width: MediaQuery.of(context).size.height * 9 / 16,
  decoration: const BoxDecoration(
    color: Colors.black,
  ),
  child: Stack(
    children: [
      // Swiper垂直滚动区域
      PageView(
        // 自定义滚动行为(支持桌面端滑动、去掉滚动条槽)
        scrollBehavior: SwiperScrollBehavior().copyWith(scrollbars: false),
        scrollDirection: Axis.vertical,
        controller: pageController,
        onPageChanged: (index) {
          // 暂停(垂直滑动)
          controller.player.pause();
        },
        children: [
          Stack(
            children: [
              // 视频区域
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                child: GestureDetector(
                  child: Stack(
                    children: [
                      // 短视频插件
                      Video(
                        controller: controller,
                        fit: BoxFit.cover,
                        // 无控制条
                        controls: NoVideoControls,
                      ),
                      // 播放/暂停按钮
                      Center(
                        child: IconButton(
                          onPressed: () {
                            controller.player.playOrPause();
                          },
                          icon: StreamBuilder(
                            stream: controller.player.stream.playing,
                            builder: (context, playing) {
                              return Visibility(
                                visible: playing.data == false,
                                child: Icon(
                                  playing.data == true ? Icons.pause : Icons.play_arrow_rounded,
                                  color: Colors.white70,
                                  size: 50,
                                ),
                              );
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                  onTap: () {
                    controller.player.playOrPause();
                  },
                ),
              ),
              // 右侧操作栏
              Positioned(
                bottom: 70.0,
                right: 10.0,
                child: Column(
                  children: [
                    // ...
                  ],
                ),
              ),
              // 底部信息区域
              Positioned(
                bottom: 30.0,
                left: 15.0,
                right: 80.0,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // ...
                  ],
                ),
              ),
              // 播放mini进度条
              Positioned(
                bottom: 15.0,
                left: 15.0,
                right: 15.0,
                child: Container(
                  // ...
                ),
              ),
            ],
          ),
          Container(
            color: Colors.black,
            child: const Center(child: Text('1', style: TextStyle(color: Colors.white, fontSize: 60),),)
          ),
          Container(
            color: Colors.black,
            child: const Center(child: Text('2', style: TextStyle(color: Colors.white, fontSize: 60),),)
          ),
          Container(
            color: Colors.black,
            child: const Center(child: Text('3', style: TextStyle(color: Colors.white, fontSize: 60),),)
          ),
        ],
      ),
      // 固定tab菜单
      Align(
        alignment: Alignment.topCenter,
        child: DefaultTabController(
          length: 3,
          child: TabBar(
            tabs: const [
              Tab(text: '推荐'),
              Tab(text: '关注'),
              Tab(text: '同城'),
            ],
            tabAlignment: TabAlignment.center,
            overlayColor: MaterialStateProperty.all(Colors.transparent),
            unselectedLabelColor: Colors.white70,
            labelColor: const Color(0xff0091ea),
            indicatorColor: const Color(0xff0091ea),
            indicatorSize: TabBarIndicatorSize.label,
            dividerHeight: 0,
            indicatorPadding: const EdgeInsets.all(5),
          ),
        ),
      ),
    ],
  ),
),

flutter3聊天功能

在这里插入图片描述
表情弹窗使用了showDialog实现功能。

// 表情弹窗
void showEmojDialog() {
  updateAnchorOffset(anchorEmojKey);
  showDialog(
    context: context,
    barrierColor: Colors.transparent, // 遮罩透明
    builder: (context) {
      // 解决flutter通过 setState 方法无法更新当前的dialog状态
      // dialog是一个路由页面，本质跟你当前主页面是一样的。在Flutter中它是一个新的路由。所以，你使用当前页面的 setState 方法当然是没法更新dialog中内容。
      // 如何更新dialog中的内容呢？答案是使用StatefulBuilder。
      return StatefulBuilder(
        builder: (BuildContext context, StateSetter setState) {
          setEmojState = setState;
          return Stack(
            children: [
              Positioned(
                top: anchorDy - (anchorDy - 100) - 15,
                left: anchorDx - 180,
                width: 360.0,
                height: anchorDy - 100,
                child: Material(
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
                  color: Colors.white,
                  elevation: 1.0,
                  clipBehavior: Clip.hardEdge,
                  child: Column(
                    children: renderEmojWidget(),
                  ),
                ),
              )
            ],
          );
        },
      );
    },
  );
}

注意：通过 setState 方法无法更新当前的dialog状态！

dialog本质上是另一个路由页面，它的性质跟你当前主页面是一样的。在Flutter中它是一个新的路由。所以，你使用当前页面的 setState 方法当然是没法更新dialog中内容。如何更新dialog中的内容呢？答案是使用StatefulBuilder。

late StateSetter setEmojState;

// 表情Tab切换
void handleEmojTab(index) {
    var emols = emoJson;
    for(var i = 0, len = emols.length; i < len; i++) {
        emols[i]['selected'] = false;
    }
    emols[index]['selected'] = true;
    setEmojState(() {
        emoJson = emols;
    });
    emojController.jumpTo(0);
}

综上就是flutter3+dart3开发桌面端聊天项目的一些知识分享~ 希望对大家有所帮助！

最后附上两个最新项目实例

在这里插入图片描述

xiaoyan_2018
关注
  • 24
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Android 仿微信语音聊天，flutter项目结构
m0_64382950的博客
12-08 481
4.录音类里有两个成员：录音长度，录音路径。 下面贴一下代码： 自定义Button package com.zms.wechatrecorder.view; import com.zms.wechatrecorder.MyAudioManager; import com.zms.wechatrecorder.MyAudioManager.AudioStateChangeListener; import com.zms.wechatrecorder.R; import android.content.Cont
把Flutter扩展到微信小程序端的探索
weixin_43901866的博客
12-16 1176
Google Flutter是一个非常优秀的跨端框架，不仅可以运行在Android、 iOS平台，而且可以支持Web和桌面应用。在国内小程序是非常重要的技术平台，我们也一直思考能否把Flutter扩展到小程序端？我们团队之前已经开源了Alita项目（https://github.com/areslabs/alita），Alita可以把React Native的代码转换并运行在微信小程序平台。受此启...
flutter_wechat_ui:flutter实现微信简易UI
05-13
flutter_wechat_ui 使用Flutter实现微信的部分界面（与实际效果有偏差，主要是为了熟悉控件的使用，以及事件绑定等）  效果图 ++
Flutter框架高阶——Window应用程序设置窗体窗口背景完全透明
最新发布
m0_73660699的博客
06-19 1234
文章涉及了在 Flutter 桌面应用中如何通过 C++ 和 Win32 API 实现窗口透明效果，并介绍了如何在 main.cpp 中修改代码以实现透明窗口。此外，还讨论了两个 Flutter 包 bitsdojo_window 和 window_manager 的区别及如何同时使用它们来管理和自定义窗口。最终提供了示例代码和注意事项，帮助开发者理解和实现窗口透明化功能。
bitsdojo_window:Flutter软件包，可轻松自定义和使用Flutter桌面应用程序窗口
03-20
bitsdojo_window ，可轻松在Windows和macOS上自定义和使用Flutter桌面应用程序窗口。 观看教程以开始使用。单击下面的图像观看视频： 特点： - Custom window frame - remove standard Windows/macOS titlebar and buttons - Hide window on startup - Show/hide window - Move window using Flutter widget - Minimize/Maximize/Restore/Close window - Set window size, minimum size and maximum size - Set window position - Set window alignment on screen (center/topLef
Flutter 3.0 发布啦～快来看看有什么新功能-2022 Google I/O
恋猫de小郭的博客
05-12 6679
本次 Flutter 3.0 主要包括 macOS 和 Linux 的稳定版发布，以及相关的性能改进等。原文链接 https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0 又到了发布 Flutter 稳定版本的时候，在三个月前我们发布了 Flutter 关于 Windows 的稳定版，而今天，除 Windows 之外，Flutter 也正式支持 macOS 和 Linux 上的稳定运行。 在这里感谢所有 Flutter contrib.
Flutter笔记：桌面应用 窗口定制库 bitsdojo_window
jclee95的个人博客
11-17 2139
使得开发者可以轻松地控制窗口的大小、位置、最小化、最大化、全屏、关闭等操作。此外，它还允许开发者自定义窗口的外观，包括窗口的标题、图标、背景颜色等。模块提供了一种简化窗口管理、自定义窗口外观和交互的方法，使开发者能够更轻松地构建具有桌面风格的应用程序。通过这些高级功能，你可以提供更丰富的交互体验，使你的 Flutter 桌面应用程序更加易用和友好。提供了一系列的函数，用于进行窗口的最小化、最大化、全屏和关闭操作。对象，可以设置窗口的最小大小、当前大小、位置、标题等属性，并可以显示窗口。
【flutter 3】打包 windows桌面端程序 exe
La La Land
09-09 1107
发现全网都是非常旧的教程，现在打包Windows desktop程序不需要装go语言什么的首先这个flutter程序可以运行的。
Flutter 3.0 发布，横跨iOS、Android、Windows等六大平台
CSDN资讯
05-12 1849
Flutter 3.0正式发布
Freadhub终于升级Flutter2
m0_67595789的博客
04-27 921
其它小优化 1、全局增大圆角效果原先的6增大到12-包括AlertDialog、更多信息Dialog、底部ModalBottomSheet、卡片圆角线及Card、选择主题Button圆角 2、优化选择主题方式-将原来的折叠形式改为底部弹出ModalBottomSheet模式 3、修改toast组件oktoast为bot_toast，并修改ToastUtitl默认使用悬浮通知卡片模式 4、去除文本段前段后的空白字符，优化显示更多资讯逻辑。 5、资讯详情页增加底部分享FloatingActionButton，方
flutter_windows_v1.2.1-stable.zip
02-27
flutter_windows_v1.2.1-stable.zip，Flutter1.2.1正式版
Flutter 构建漂亮的 Windows 应用程序ーー流畅的设计结构和导航
会煮咖啡的猫咪
06-03 1194
老铁记得 转发 ，猫哥会呈现更多 Flutter 好文~~~~ 微信 flutter 研修群 ducafecat 猫哥说 这是一套用来做 Windows UWP APP 的界面解决方案库 界面的搭建，菜单 导航 Tab 表单 常用控件 样式抽取 转场动画 图标 主题 自适应切换 都有了 如果你用的话可以 clone 一套，自己维护或者研究 https://github.com/bdlukaa/fluent_ui [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VXVnj88t-
Get CLI - 强大的项目管理 GetX 工具
会煮咖啡的猫咪
11-20 1552
Get CLI - 强大的项目管理 GetX 工具 https://shirsh94.medium.com/get-cli-powerful-getx-tool-for-project-management-bdf54572d91f 前言 一个来自 Getx 的工具可以帮助你快速的建立项目，页面和视图。 大家好，在本文中，我将讨论 get CLI 工具。如果您正在使用 getX 包，那么 get CLI 是您可以使用的强大工具之一。有了这么多东西，我们可以很容易地管理它。 我们花了很多时间创建页面控
Flutter 3 发布了(文末推荐一个免费的在线Flutter学习教程)
zls365365的博客
05-27 1726
翻译自 Tim Sneath[1] 2022年5月12日的文章 《Introducing Flutter 3》[2]作者 ：Tim Sneath翻译 ：沙漠尽头的狼(谷歌翻译加持)链接 ：Introducing Flutter 3(英文原文)我们在手机、桌面和网站开发上进行多平台UI开发的历程达到了顶峰。我们很高兴地宣布，作为Google I/O主题演讲的一部分推出Flu...
Windows下搭建Flutter开发环境
qq_34497319的博客
08-14 225
系统要求 要安装并运行Flutter，您的开发环境必须满足以下最低要求: - 操作系统: Windows 7 或更高版本 (64-bit) - 磁盘空间: 400 MB (不包括Android Studio的磁盘空间) - Flutter 依赖下面这些命令行工具 - Git for Windows (Git命令行工具) 如果已安装Git for Windows，请确保命令提示符或Power...
Flutter 安装 Windows 版
weixin_42364397的博客
09-03 263
Flutter 安装 Windows 版 Flutter中文官网：https://flutterchina.club/setup-windows/ 一、配置环境变量 1. 我的电脑（鼠标右键） =》 属性 2. 高级系统设置 3. 环境变量 4. 新建变量 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL PUB_HOSTED_URL = https://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URL = https://
Flutter在windows系统配置及运行
明知山
03-01 1288
第一步 下载安装配置jdk 下载jdk 下载链接 根据自己的操作系统选择安装 安装jdk 双击下载的jdk傻瓜式下一步，建议不要修改安装目录，让它安装到c盘目录下 配置jdk的系统变量 变量名为JAVA_HOME，值为jdk安装目录 再系统变量找到 Path 在 Path 的环境变量里面增加如下代码 ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 注意 ’ ; ’...
Flutter之路~Windows 搭建flutter环境
ssdate的专栏
11-06 240
1.获取Flutter SDK 由于Flutter 要依赖git命令行工具，所以要先安装git。 Git for Windows(Git命令行工具) Flutter的获取，可以有两种方式： 第一、使用git进行克隆下载： git clone -b beta https://github.com/flutter/flutter.git 第二、去官...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoyan_2018

你的鼓励将是我持续作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值