Flutter Tutorial - How To Remove # Hash Symbol From URL | Flutter Web | Debug & Production
Why Stack Overflow recommends it
Stack Overflow users link it when answering how to remove the # from Flutter web URLs, and for the server rewrite and .htaccess setup that fixes 404s on page refresh.
Recommended by 1 people across 1 different months, 2022 to 2023.
What it is
A short Flutter Web tutorial by Johannes Milke (HeyFlutter) showing how to remove the # hash from URLs using the url_strategy package for both debug and release builds. It also covers hosting setups such as GitHub Pages and server rewrite configuration, and explains hash strategy versus path strategy.
What people said
Recommends Martin Reindl · 2022-04 · Stack Overflow · on “How to remove hash (#) from URL in Flutter web”
I found most of the answers above to be a bit confusing. What ended up working for my firebase-hosted website was following this short 4-minute [this video] by Johannes Milke. The tutorial outlines a number of options for solving the "#" problem, basically explaining some of the answers above a bit better. My final solution was to Add url_strategy dependency as outlined in many of the answers above. Adding base href="/"> inside the section of my index.html file Making sure that all paths point to index.html by adding "rewrites": [ { "source": "**", "destination": "/index.html" } ] in my firebase.json.
Cites Шахзод · 2022-07 · Stack Overflow · on “How to remove hash (#) from URL in Flutter web”
Install in pubspec.yaml url_strategy Write in main.dart: import 'package:url_strategy/url_strategy.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); setPathUrlStrategy(); runApp(MyApp()); } If you get an error when you refresh the page, then add file 404.html to the folder with index.html. Copy the entire contents of the index.html and paste it into the 404.html. For some hosts it's enough. But some host aslo requires the file ".htaccess". You shoud create in the same folder the file ".htaccess" and write into this file: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule . /index.html [L] This solution was recieved from this vid
Cites raw · 2023-11 · Stack Overflow · on “Flutter web 404 Not Found”
Referring to MrWhite's answer [LINK] and johannesmilke's video [this video] Creating the file under './myApp/web/.htaccess' RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule . /index.html [L] seems to do the trick. And it seems it will also be included in the build by doing so.