This content originally appeared on Level Up Coding - Medium and was authored by Sajeevan Wickramarathna
Dealing with the default hashtag right after the root URL
In flutter web, there is a default hashtag right after the root URL. Therefore, if we use a URL that contains the hashtag on the web browser address bar, we are navigating to the root page of the website always. Therefore we have to perform some configuration changes to fix this issue.
Let’s follow the below steps to accomplish that…..
- Go to the pubspec.yaml file then go to the dependencies category and add the url_strategy package
2. Go to your main.dart file and import,
import 'package:url_strategy/url_strategy.dart';
3. Under the main() method,
add setPathUrlStrategy() and WidgetsFlutterBinding.ensureInitialized()
before the runApp(MyApp());
By following steps correctly, you will end up with the URLs that do not contain the hashtag right after the root URL and now you can navigate to the other routes without any issue.
It is important to mention that, all these things that are mentioned above work fine when your application is in Debug mode. But after hosting or deploying your application to the production environment and the application is at Release mode. Then the URL without Hashtag will not navigate to the relevant web page and shows page not found 404 page.
To fix this issue, we have to change the server configurations. To do that you can use two solutions.
Solution 1:
- Create a .htaccess file in the root directory (where the same level of the index.html file exists).
- Inside of .htaccess file, we have to redirect all of the unknown routes to the index.html by adding RewriteRule. /index.html [L]
Solution 2:
Some hosting platforms will not support the .htaccess file creation mechanism and the general solution is as follows.
- Create a 404.html file in the root directory (where the same level of the index.html file exists)
- Go to the index.html file and copy the whole content of the index.html file
- Go to the 404.html file and paste the whole content and save
Cool…….😎 now solve the hash symbol removing in Release mode in flutter web as well.
Summary:
If a client makes a request from the root of the server it is basically dealing with the index.html file and navigates to the relevant web page.
Path Strategy
In path strategy, if a client requests any other URL, then the server will navigate to the 404.html file, or in case if not, the default “page is not found” in the specific browser is one solution. Another solution is to rewrite the index.html.
Hash Strategy
In Hash Strategy, the path after the # tag will not send to the server therefore it always returns to the index.html in the flutter web application. This does not need additional server configuration and after loading the index.html file from the server then Flutter picks up the last part of the URL and navigates to the relevant URL
I hope you gain some important facts through this article. If you enjoy the article then hit a clap.🙌
Thank you for reading.😎
Keep Learning!!! Keep Fluttering!!!
How To Remove # Hash Symbol From URL with Flutter Web was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Sajeevan Wickramarathna
Sajeevan Wickramarathna | Sciencx (2021-11-04T04:17:44+00:00) How To Remove # Hash Symbol From URL with Flutter Web. Retrieved from https://www.scien.cx/2021/11/04/how-to-remove-hash-symbol-from-url-with-flutter-web/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.