Flutter Web Page Refresh and 404 Not Found Error

Question

In the main method i used UrlStrategy package as seen in the below because i don't want # in my urls:

void main() {
  setPathUrlStrategy();
  runApp(const MyApp());
}

In the debug mode when i tested the website, there was no problem. Then i published my website. The homepage is like www.example.com and when i tried to refresh the page with F5, there is no problem. Then i navigate to another page like www.example.com/about-us and try to refresh page with F5 again, and i get "404 not found" error.

To solve this i created .htaccess file in htdocs and wrote inside of this file:

RewriteEngine on
RewritwCond %{REQUEST_FILENAME} !-d
RewritwCond %{REQUEST_FILENAME} !-f
RewriteRule . /index.html [L]

But i started to get 500 Internal Server Error.

There was an existing .htaccess file outside of htdocs. I copied the code above and pasted it inside of existing .htaccess. But again same problem. The codes in existing .htaccess file is given in below:

##################################################
#
# DO NOT EDIT THIS FILE
#
# Create a new .htaccess file in your htdocs
# directory (or example.com/htdocs/ directory)
# to add your own rules or override these rules.
#
##################################################

DirectoryIndex index.php index.html index.htm index2.html

ErrorDocument 403 https://infinityfree.net/errors/403/
ErrorDocument 404 https://infinityfree.net/errors/404/
ErrorDocument 500 https://infinityfree.net/errors/500/

What i have to do?

Answer 1

I created a file called .htaccess in htdocs. And I pasted the codes given below:

RewriteEngine On
RewriteBase /
RewriteCond $1 !^(index\.html|assets|robots\.txt|favicon\.png)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ index.html [L]

The problem is solved.