如何在 Netlify 上部署Flutter Web App？

在本文中，我们将在 netlify 上部署一个 counter flutter web 应用程序，它是一个单页应用程序。

网络化：

它是一个进行 CI/CD、部署和扩展托管的 Web 开发平台。它支持包括Flutter在内的多个框架。部署网站不需要花钱，但仅限于某些功能。

首先，让我们创建一个flutter Web 应用程序。如果当前版本不支持 web app，我们需要先升级flutter 。运行以下命令将flutter升级到稳定频道。

现在，让我们确保我们有flutter设备来在浏览器上呈现 Web 应用程序。为确保这一点，请在终端中键入以下命令。

它将显示可用于运行该应用程序的所有设备和一个为该应用程序提供服务的网络服务器。在这里，它是铬。

创建并运行：

创建具有 Web 支持的新项目的方法与 android 或 iOS 应用程序相同。从终端创建一个新应用程序，它会自动创建一个适用于 android、web 和 iOS 的应用程序。请记住，如果您尚未升级Flutter ，它不会为您的项目创建 Web 应用程序。如果您想在项目文件夹内的终端中为现有项目类型 ( flutter create . ) 支持 web。否则，对于新项目，只需键入以下命令。

要在 Chrome 中的 localhost 上提供您的应用程序，请转到您的应用程序文件夹并执行以下操作：

你应该在你的本地主机端口上看到这样的东西——

由于网络应用程序运行良好。是时候将它部署到 netlify 了。部署的方法有很多，但这里只讨论最简单的方法。是时候在终端中使用一个简单的命令来构建要发布的应用程序了。

这将在 build 文件夹中创建一个 web 文件夹，该文件夹是此处所有内容的主控。

部署：

如果到目前为止还没有，请在 Netlify 上创建一个帐户。仪表板将如下所示：

我们也可以使用 Git 进行部署，但在这里我们将看到一个简单的拖放方法，这是一种使用文件夹的直接方法，而不是先将代码推送到 Github 然后再部署它。如果您是初学者，在 Flutter Web 应用程序部署的情况下，您可能会卡在 Github 和flutter之间，这与 JavaScript 网站不同。现在，点击站点，它会带你到一个看起来像这样的页面——

在站点页面的末尾，有一个用于拖放目的的框。但是我们需要放哪个文件夹？将web文件夹拖放到 build 文件夹中，Netlify 将自动开始部署 web 应用程序。它将创建一个指向您的网络应用程序的链接，您可以与任何人共享该链接以查看您的网站。

如果您不喜欢 Netlify 生成的域名，您可以更改域名。如果您在部署这种方式时遇到任何困难，请在评论部分告诉我们。