Flutter窗口管理插件flutter_window的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter窗口管理插件flutter_window的使用

flutter_window

一个可以拖拽缩放的窗口组件。

平台

Android Windows Linux Web MacOS iOS
❌ ❌ ❌ ✔️ ❌ ❌

时间有限，暂时只测试了Web平台。

安装

在pubspec.yaml文件添加依赖:

dependencies:
  flutter_window: ^latest_version

示例

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_window/property/border_property.dart';
import 'package:flutter_window/windows.dart';

void main() {
  runApp(const ToolmanApplication());
}

class ToolmanApplication extends StatefulWidget {
  const ToolmanApplication({Key? key}) : super(key: key);

  [@override](/user/override)
  State<ToolmanApplication> createState() => _ToolmanApplicationState();
}

class _ToolmanApplicationState extends State<ToolmanApplication> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            return SizedBox(
              width: constraints.maxWidth,
              height: constraints.maxHeight,
              // color: Colors.black,
              child: Stack(
                children: const [
                  Windows(
                    draggable: false, // 是否可拖动
                    border: BorderProperty.onlyThickness(3), // 边框厚度
                    height: 500, // 窗口高度
                    width: 500, // 窗口宽度
                    body: Text('Emulates the operating system window, which can be zoomed and dragged'), // 窗口主体内容
                    index: 1, // 窗口组件索引（预留）
                    position: Offset(50, 50), // 窗口偏移值
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter窗口管理插件flutter_window的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter窗口管理插件flutter_window的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，flutter_window 是一个用于管理窗口属性的插件，特别是在桌面平台上（如Windows、macOS和Linux）。这个插件允许你控制窗口的标题、大小、位置以及其它窗口相关的属性。以下是如何在Flutter项目中使用 flutter_window 插件的一个简单示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_window 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_window: ^0.x.y  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 配置插件

由于 flutter_window 插件主要针对桌面平台，你需要在你的 CMakeLists.txt 或 build.gradle 文件中进行相应的配置，确保插件在桌面平台上可用。这通常不需要手动操作，因为插件作者已经处理了这些配置。但请确保你的 Flutter 环境已经配置为支持桌面开发。

3. 使用插件

以下是一个简单的示例，展示了如何使用 flutter_window 插件来设置窗口的标题和大小：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Window Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 设置窗口标题
    setWindowTitle('My Flutter App');
    // 设置窗口大小（宽度x高度）
    setWindowSize(LogicalSize(width: 800, height: 600));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Window Example'),
      ),
      body: Center(
        child: Text('Hello, Flutter Window!'),
      ),
    );
  }
}

void setWindowTitle(String title) {
  if (kIsWeb || !kIsDesktop) return;
  windowManager?.setTitle(title);
}

void setWindowSize(LogicalSize size) {
  if (kIsWeb || !kIsDesktop) return;
  windowManager?.setSize(size);
}

注意事项

  1. 条件编译：由于 flutter_window 插件仅在桌面平台上可用，因此在调用相关方法前，最好使用 kIsDesktop 条件编译来检查当前平台。
  2. 插件初始化：在某些情况下，你可能需要等待 WindowManager 实例初始化完成后再调用其方法。这通常可以通过监听相应的状态变化或使用插件提供的初始化方法来实现。
  3. 权限问题：在某些操作系统上，修改窗口属性可能需要特定的权限。确保你的应用具有相应的权限，以避免运行时错误。

以上代码提供了一个基本的示例，展示了如何在 Flutter 桌面应用中使用 flutter_window 插件来管理窗口属性。根据你的具体需求，你可以进一步扩展和自定义这些功能。

回到顶部