📌  相关文章
📜  如何在Flutter中创建桌面窗口应用程序?

📅  最后修改于: 2022-05-13 01:55:12.522000             🧑  作者: Mango

如何在Flutter中创建桌面窗口应用程序?

flutter团队最近发布了具有桌面支持的Flutter 2.10 版本。桌面支持允许您将Flutter源代码编译为本机 Windows、macOS 或 Linux 桌面应用程序。 Flutter 的桌面支持还扩展到插件——您可以安装支持 Windows、macOS 或 Linux 平台的现有插件,也可以创建自己的插件。

要求

众所周知,桌面支持在flutter版本 2.10 或更高版本中可用。所以你需要 2.10 或更高版本。从命令行升级Flutter SDK:

颤振升级

flutter升级

创建新项目

您可以使用以下文章在Flutter中创建新项目。

设置

在 Windows 上, Flutter 2.10 或更高版本启用了桌面支持。在 macOS 和 Linux 上,桌面支持在 stable 频道中默认禁用。您可以使用以下命令之一手动启用它,具体取决于您正在运行的平台:

flutter config --enable-macos-desktop flutter config --enable-linux-desktop

要测试是否配置了桌面支持,请使用flutter devices 命令列出可用目标。

flutter devices 
颤振装置

flutter装置

这将向您显示系统中的可用设备。您也可以运行flutter doctor来查看是否有任何未解决的问题。您应该会看到每个成功配置的区域的复选标记。它在 Windows 上应该如下所示,并带有“develop for Windows”条目:

扑医生

flutter医生

创建并运行

创建一个 Windows 桌面应用程序就像为另一个平台(如 Android)创建一个flutter项目一样简单。为桌面支持配置环境后,您可以在 IDE 中或从命令行创建和运行桌面应用程序。不要删除默认代码,我们将运行flutter的默认代码。

Dart
import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
    
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting
        // nicer for build methods.
    );
  }
}


从 IDE 运行

在 IDE 中,您必须单击右上角的开始调试,如下图所示。

开始调试

开始调试

这将需要 3 -4 分钟,

输出

从命令行运行

cd project-name
flutter run -d windows

构建发布应用

要生成发布版本,请在命令行中运行以下命令,

PS flutter build windows
flutter build macos
flutter build linux