unable to navigate in flutter web by changing url after removing # from the url

Question

I was able to navigate to other pages by changing the url of my flutter web hosted on netlify(manually deployed) by typing the url in search bar as shown below:-

So if i change /home to /about then it leads me perfectly to about page. But to remove this '#' from my url i added the following code in my main.dart My Code:-

import 'package:url_strategy/url_strategy.dart';

void main()async {
  await Firebase.initializeApp();
  setPathUrlStrategy();//this removes the '#' from my url
  FluroRouting.setupRouter();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/home',
      onGenerateRoute: FluroRouting.router.generator,
    );
  }
}

and code for routing is:-

class FluroRouting {
  static final router = FluroRouter();
  static Handler _aboutUsHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          AboutUs());
  static Handler _homeHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          HomePage());
  static void setupRouter() {
    router.define('/home', handler: _homeHandler,);
    router.define('/about', handler: _aboutUsHandler,);
  }
  static void navigateToPage({String routeName,BuildContext context}) {
    router.navigateTo(context, routeName, transition: TransitionType.none);
  }
  static void pushAndClearStackToPage({String routeName,BuildContext context}) {
    router.navigateTo(context, routeName, clearStack: true,transition: TransitionType.none);
  }
}

After doing so the '#' was successfully removed but when i change /home to /about then it shows page not found error.

Have you changed your `` to `href="/"` in your `web/index.html`? This has better explanation. https://stackoverflow.com/a/65709246/11855654 — Chirag Bargoojar, May 30 '21 at 05:05
@ChiragBargoojar I dont think OPs issue is that he is hosting at a different root location. He mentioned that `when changing /home to /about` he is facing the issue. — Nisanth Reddy, May 30 '21 at 05:09
Deepak Post your code for the `setPathUrlStrategy` function. What are you doing in there ? — Nisanth Reddy, May 30 '21 at 05:10
@DeepakLohmod Did you find solution for this issue? i am facing same issue after removing # using url_strategy package. — Riya Parmar, Jun 02 '21 at 09:21

score 0 · Answer 1 · answered Jun 10 '21 at 13:36

I found the solution for this problem,in my case at least, my best guess is that the way the path domain is configured in free deploy for testing websites like surge, netlify and even Firebase hosting is breaking the functionality of setPathURl(). I used a domain that I've bought some time prior and it worked like a charm, but if I try to access the same website by using the firebase hosting domain it didn't worked.

Use a real domain to test functionalities of usePathUrlStrategy

I have my own domain(real one) – Deepak Lohmod Jun 10 '21 at 14:57 — Deepak Lohmod, Jun 10 '21 at 14:57

score 0 · Answer 2 · answered Jul 22 '21 at 07:31

The path URL strategy should be called separately and assigned as given in the official document for web projects.

https://flutter.dev/docs/development/ui/navigation/url-strategies

I set the path URL strategy in my project as given below,

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

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

FYI, I have also hosted it for production and it works fine.

Can you also post your code on how you assign routes?

Have tried it but it didn't worked and have added code of my routing — Deepak Lohmod, Jul 22 '21 at 10:23

score 0 · Answer 3 · edited Nov 15 '21 at 00:14

0

I had the same problem and fixed it by adding an .htaccess file to the hosting site, next to index.html, with the following configuration:

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

edited Nov 15 '21 at 00:14

Jeremy Caney

7,102
69
48
77

answered Nov 14 '21 at 22:02

DYY

71
7

score 0 · Answer 4 · answered May 23 '22 at 16:48

0

I created a file next to where the index.html is in the web folder with

/*    /index.html    200

the file call "_redirects" and work to me

answered May 23 '22 at 16:48

Juan Labrador

1,204
10
14

unable to navigate in flutter web by changing url after removing # from the url

4 Answers4

Linked