Flutter web to persist the URL Query String parameter on route change. Flutter white labelling

Question

The Flutter web app I am building have a white label feature that is based on the URL query string /#?brd=BrandName... by the requirements, the white label must work based on the url parameter brd as domain will be the same for all brands.

Currently it works fine and loads the correct info, however if user navigates once and refreshes the page it falls back to main brand as the query parameter brd is not present.

Is there a way in flutter to persist the query parameters on every route change?

VaZeR · Accepted Answer · 2022-08-08 07:14:31Z

1

Try this:

Remove your initialRoute and routes from MaterialApp (if you use Material).
Use only onGenerateRoute e.g.:

onGenerateRoute: (settings) {
        print(settings);

        if (settings.name!.contains('?brd=BrandName') == false) {
          return MaterialPageRoute(
            builder: (context) {
              return const HomePage();
            },
            settings: RouteSettings(
                name: '?brd=BrandName', arguments: settings.arguments),
          );
        }

        if (settings.name!.contains(DetailsPage.routeName)) {
          final List<String> uri = settings.name!.split('/');

          if (uri.length == 3) {
            return MaterialPageRoute(
              builder: (context) {
                return DetailsPage(pageId: uri[2]);
              },
              settings: settings,
            );
          }
        }

        return MaterialPageRoute(
          builder: (context) {
            return const HomePage();
          },
          settings: settings,
        );
      },

In my example I have two pages:

Home - /#?brd=BrandName

Details - /#?brd=BrandName/details/2

Example with button:

ElevatedButton(
              onPressed: () {
                navigatorKey.currentState!
                    .pushNamed("?brd=BrandName/details/2");
              },
              child: const Text('Go to Page 1'),
            )

P.S. When you change something in routers it is much better to reboot your application completely.

answered Aug 8, 2022 at 7:14

VaZeR

6761 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

caiovisk Over a year ago

Thanks... however this way I would have to have a different url structure, and would not be a valid query parameter but a route itself. Ended up using the localstorage

caiovisk · Accepted Answer · 2022-08-24 00:06:55Z

1

Ended up using localstorage package. In this way I don't need to change or mess up with the routes.

Basically on the initialisation I check if the brand is there or not, and set it into the browser local storage.

void brandChecker() async {
  //get brd queryParameter e.g: ?brd=BrandName
  String? urlBrd = Uri.base.queryParameters["brd"];
  final LocalStorage storage = LocalStorage('setBrd');
  await storage.ready;
  //get any stored brand from localStorage, null if none
  String? selectedBrd = storage.getItem('brd');

  if (urlBrd != null && selectedBrd != null && urlBrd != selectedBrd) {
    brand = getBrand(urlBrd.toString());
  } else {
    //If brand is not provided check the local storage otherwise fallback getBrand
    brand = (selectedBrd != null) ? selectedBrd.toString() : getBrand(urlBrd.toString());
  }

  storage.setItem('brd', brand);
  brandSetup();
}

answered Aug 24, 2022 at 0:06

caiovisk

3,8281 gold badge14 silver badges23 bronze badges

4 Comments

Glen Rynaldi Over a year ago

I think local storage would be bad if you open multiple tabs

caiovisk Over a year ago

@GlenRynaldi its a single page application, user should not be opening multi tabs.

Vega Over a year ago

Wait, single page app doesn't mean one tab opened

caiovisk Over a year ago

@Vega Correct, I doesn't, but to clarify, on my application user should not be using multiple tabs.

Collectives™ on Stack Overflow

Flutter web to persist the URL Query String parameter on route change. Flutter white labelling

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related