如何使用自定义端口运行 Flutter Web

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

默认情况下，每次在localhost上启动 Flutter web 时，它都会有一个不同的端口。但是，在某些情况下，您需要设置一个固定端口（例如，当您想使用 Google 登录实现社交身份验证时）。为此，请在运行项目时使用–web-port标志，如下所示：

flutter run -d chrome --web-port=8080

截屏：

然后大家是不是发现上面有个# ，说实话，我看着也很烦，那么如何解决呢，其实也简单。导入下面的包

url_strategy: ^0.2.0

如何安装呢？控制台运行

flutter pub add url_strategy

url_strategy

Flutter 应用程序包，允许使用单行代码设置 Web URL 策略。

import 'package:url_strategy/url_strategy.dart';
​
void main() {
  // Here we set the URL strategy for our web app.
  // It is safe to call this function when running on mobile or desktop as well.
  setPathUrlStrategy();
  runApp(MyApp());
}

现在，您的 Flutter Web 应用程序的 URL 中将不再有前导#。

即使在 web 以外的任何其他平台上运行（这是这个包的重点），调用该函数也是安全的。这意味着您可以setPathUrlStrategy在移动设备或台式机上运行时安全地调用 - 这将只是一个 noop。

所以大家看到了吗？没有了哦。

完整代码

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:url_strategy/url_strategy.dart';
​
void main() {
  setPathUrlStrategy();
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: '大前端之旅',
        theme: ThemeData(
          primarySwatch: Colors.indigo,
        ),
        home: const HomePage());
  }
}
​
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('大前端之旅')),
      body: const Center(
        child: Text(kIsWeb ? 'Web' : 'Not Web',
            style: TextStyle(
              fontSize: 40,
            )),
      ),
    );
  }
}
​