Flutter Web URL Navigation like http://myflutterproject/userabc

Question

using flutter 2.2 and try to play with URL can anyone help me to get this stuff done.

How I can achieve this URL in flutter web? http://myflutterproject/userabc

Answer 1

You need to specify the routes used by your app when you create a new MaterialApp the navigate to the page by route name.

like this:

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),
      ),
    );
  }
}

You can set the callback function onGenerateRoute for more dynamism and check the RouteSettings.name value

NB: you can use RegEx for complex check.

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")),
            );
          },
        ),
      ),
    );
  }
}