Flutter Web URL 导航，例如 http://myflutterproject/userabc

Question

使用颤振 2.2 并尝试使用 URL 任何人都可以帮助我完成这些工作。

如何在 Flutter Web 中实现此 URL？ http://myflutterproject/userabc

Answer 1

您需要在创建new MaterialApp 时指定应用使用的路由，然后按路由名称导航到页面。

像这样：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      // ROUTES DECLARATIONS
      routes: {
        "/userabc": (context) => UserAbcPage(),
      },
      home: Scaffold(
        body: Builder(
          builder: (BuildContext currentContext) {
            return Center(
              child: TextButton(
                  onPressed: () {
                    // ROUTE USAGE
                    Navigator.pushNamed(currentContext, "/userabc");
                  },
                  child: Text("Navigate to detail")),
            );
          },
        ),
      ),
    );
  }
}

class UserAbcPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
            Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
      ),
    );
  }
}

您可以设置回调函数 onGenerateRoute 以获得更多活力并检查RouteSettings.name 值

注意：您可以使用RegEx 进行复杂检查。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      onGenerateRoute: (settings) {
        if (settings.name == null) return UnknowPage();
        
        if (settings.name == '/store-list') {
          return MaterialPageRoute(
            builder: (context) {
              return StoreListPage();
            },
            settings: RouteSettings(name: settings.name),
          );
        }
        
        if (settings.name!.startsWith("/store/") && settings.name!.contains("/detail/")) {
          
          return MaterialPageRoute(
            builder: (context) {
              final params = settings.name!.split("/"); /// '/store/billy-shop/article/google-pixel-5' => ['' 'store' 'billy-shop' 'article' 'google-pixel-5']
              return ArticleDetailPage(storeKey: params[2],
                                      articleKey: params[4]
                                      );
            },
            settings: RouteSettings(name: settings.name),
          );
        }
        if (settings.name!.startsWith("/store/")) {
          return MaterialPageRoute(
            builder: (context) {
              final storeKey = settings.name!.split("/store/")[1];
              return StoreDetailPage(storeKey: storeKey);
            },
            settings: RouteSettings(name: settings.name),
          );
        }
      },
      home: Scaffold(
        body: Builder(
          builder: (BuildContext currentContext) {
            return Center(
              child: TextButton(
                  onPressed: () {
                    // ROUTE USAGE
                    Navigator.pushNamed(currentContext, "/store/billy-shop/article/google-pixel-5");
                  },
                  child: Text("Navigate to detail")),
            );
          },
        ),
      ),
    );
  }
}