将Flutter前端与.NET Core后端相结合，适用于Android和iOS

sg3maiej 于 2022-12-19 发布在 Flutter

关注(0)|答案(6)|浏览(409)

目前为一家使用.NET（非Core）的公司工作，但希望切换到.NET Core，并考虑通过创建一个具有Flutter.io前端和.NET Core后端的应用程序来实现这一目标。具有后端的应用程序只是为了了解.NET Core的功能。
我找不到任何信息，如果这两个组合甚至是可能的Android/iOS。
我这么问是因为Flutter刚刚进入测试阶段。

flutter

来源：https://stackoverflow.com/questions/49114212/combining-flutter-frontend-with-net-core-backend-for-android-and-ios

6条答案

按热度按时间

ego6inou1#

.NET/core是针对API的，flutter是针对原生应用的，它们完全无关。
一方不会对另一方产生影响。所以是的，你可以两个都用。

赞(0）回复(0）举报 2022-12-19

hec6srdp2#

我喜欢在我的.Net Web API后端使用Flutter。Flutter中的Web API支持非常棒，因为它们内置在JSON serialization support中。组合非常漂亮，我迷上了这个强大的框架

赞(0）回复(0）举报 2022-12-19

6ljaweal3#

ServiceStack v5.1添加了对Dart和Flutter的本机支持，您可以在其中从远程URL生成端到端的类型化API，例如：

$ npm install -g @servicestack/cli

$ dart-ref https://www.techstacks.io

NET Core 2.0以及任何.NET流行的托管选项都支持此功能。上面的示例为.NET Core 2.0 TechStacks project生成了一个类型化API。
HelloFlutter App显示了使用类型化API调用.NET Core 2.0和经典ASP.NET应用程序后端的示例：

要调用任何服务，您只需导入servicestack Dart package和生成的DTO，例如：

import 'package:servicestack/client.dart';
import 'techstacks.dtos.dart';

然后创建一个配置了远程URL的JsonServiceClient示例，例如：

var client = new JsonServiceClient("https://www.techstacks.io");

然后，您可以像调用任何异步API一样在Flutter小部件中调用它：

class HelloFlutter extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new HelloFlutterState();
}

class HelloFlutterState extends State<HelloFlutter> {
  //State for this widget
  String result = "";

  @override
  Widget build(BuildContext context) {

      //...
      new RaisedButton(
        child: new Text("Async"),
        onPressed: () async {
          var r = await client .get(new Hello(name: "Async"));
          setState(() {
            result = r.result;
          });
        },
      ),

      //...
      new Text(result),
  }
}

有关更多信息，请参阅ServiceStack's native Dart support的文档。

赞(0）回复(0）举报 2022-12-19

rta7y2nd4#

我也见过一个叫Flutnet的项目使用2，但我自己没有使用过。
https://www.flutnet.com/

赞(0）回复(0）举报 2022-12-19

lnxxn5zx5#

它们是独立的。
我是asp.netmvc（剃刀页面），然后移动到Angular 的用户界面。现在与Flutter的用户界面工作。
我正在做的项目，你可能会发现有用的。https://github.com/chhinsras/MiniStarter

赞(0）回复(0）举报 2022-12-19

4xrmg8kj6#

也许，现在回答已经有点晚了，但无论如何，我在我的项目中面临着同样的问题。
很明显，Flutter和.net项目是相互独立的，可以通过REST API或gRPC连接，但在我的情况下，我真的想将它们合并到一个项目中，从我的共享主机托管上的一个主管运行，并为前端安全另一个域名
基本上，事情很简单。
我拥有的：

.net 6.0 WebAPI，带有RazorPages（用于某些功能）
Flutter前端与WebAPI后端之间的通信与REST

有一个快速解决方案：在.net项目中使用静态文件并将Flutter版本复制到静态文件目录中（不要忘记删除Flutter版本的index.html中的一行）。缺点-因为它是一个“静态文件”，所以每个人都可以访问Flutter发布版本的所有文件
因此，我想将它作为其他.js库集成到.net中，并从RazorPages的“Pages”调用它
所以，我所做的是：

在.net项目的“页面”中创建了一个文件夹“App”，并添加了App.cshtml（成对w/o .cs），内容如下：

@page
  @{
  }
  @section Scripts
  {
  <script>// The value below is injected by flutter build, do not touch.
      var serviceWorkerVersion = '947676792';</script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="~/app/flutter.js" defer></script>

  <script>window.addEventListener('load', function (ev) {
          _flutter.loader.loadEntrypoint({
              serviceWorker: {
                  serviceWorkerVersion: serviceWorkerVersion,
              }
          }).then(function (engineInitializer) {
              return engineInitializer.initializeEngine();
          }).then(function (appRunner) {
              return appRunner.runApp();
          });
      });</script> 
      }

脚本部分来自Flutter Web Build的index.html

在.net项目的“共享”文件夹中创建了flutter-special布局文件（我们称之为_AppLayout.cshtml），内容如下：

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>`

    <base href="~/app/">

    <!--
      If you are serving your web app in a path other than the root, change the
      href value below to reflect the base path you are serving from.

      The path provided below has to start and end with a slash "/" in order for
      it to work correctly.

      For more details:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

      This is a placeholder for base href that will be replaced by the value of
      the `--base-href` argument provided to `flutter build`.
    -->

    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Flutter project.">

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="web_flutter">
    <link rel="apple-touch-icon" href="~app/icons/Icon-192.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png" />

    <title>web_flutter</title>
    <link rel="manifest" href="manifest.json">

</head>
<body>

    @RenderSection("Scripts", required: false)

</body>
</html>

此部分也取自Flutter Web Build的index.html，修改了<base href="~/app/">并在正文中添加了@RenderSection

modified _ViewStart.cshtml从.net项目的“Pages”文件夹中删除，以便将上述模板用于Flutter Page

@{
  var routeUrl = ViewContext.RouteData.Values["Page"].ToString();
  //you can put pages' name into pages
  var pages = new List<string> { "/App/App" };
  //if routeUrl contains any of pages, the page will use _Layout as Layout page, the other pages will use _Layout1 ad Layout page
  if (!pages.Any(routeUrl.Contains))
  {
      Layout = "_Layout";
  }
  else
  {
      Layout = "_AppLayout";
  }
  }

我将Flutter应用程序（Flutter项目build/web中的.js web版本）复制到.net项目的wwwroot/app目录（您可以根据需要命名目录，不一定要使用“app”，但正如您所看到的，我在上面的所有代码中都引用了“app”）
添加一个链接到我的RazorPage应用程序。cshtml到索引。cshtml像<a asp-page="/App/App">Flutter App</a>

就这样！现在我在一个项目中结合了Flutter和.net，并且可以将其部署为一个目录！
感谢阅读！

赞(0）回复(0）举报 2022-12-19

我来回答

将Flutter前端与.NET Core后端相结合，适用于Android和iOS

6条答案

相关问题

热门标签

最新问答