How to use URL parameters in Flutter Web? - flutter

I want to make it so when a user enters the URL of the app they'd get the same page, no matter what they added after the '/', but have a string stored in the code with the value after the '/'.
for example: if they enter the URL "exampleurl.app/blabla", the String would have the value "blabla".
I managed to that somewhat with Uri.base, the problem is that after the app loads the URL removes all the text after the '/' automatically, and whenever I reload the site it reloads it without the URL with the text removed.
Also if the current URL in the tab is already of the app ("exampleurl.app/nomatterwhatsaddedhere"), it assumes that it is the same URL and doesn't even reload.
It would be greatly appreciated if someone could show me a way to get the string from the URL without these issues.
Thanks in advance!

You need to use Navigator 2.0 for this kind of functionality. I recently wrote a short series that explains simply how to implement Navigator 2.0. It goes into detail explaining how to work with the URL in an app for similar functionality to what you are after, though you will need to tweak it for your use case. It provides a detailed walkthrough along with sample code available on GitHub.
A Simpler Guide to Flutter Navigator 2.0

Related

Flutter web url query parameters removed on initial load

I am hosting a flutter web app, which involves the initial url having query parameters (e.g. https://mysite.web.app/?k=ZF6K5UA7X3Jk9HJanla3). I use the url_strategy package to get rid of the #, however when the site loads, the query params are stripped off, leaving the bare-boned "https://mysite.web.app". I have got around the functionality aspect by storing the param as a cookie variable, however it is not ideal.
Is there any way to re-instate the params programmatically in the url bar of the browser? The reason for this is for both (i) giving the user the option to share the original URL, and (ii) allow them to add the app to their mobile device screen as a PWA (with the original full url).
Any suggestions welcomed.
I resolved this via the implementation of go_router. With the combination of state.queryParams and Router.neglect(context, () => context.go('/?k=$myOriginalParam')) (from any pages that wanted to go back to the original route with no browser back button history), I can retain the query parameter in the browser bar successfully.

Tumblr share url

I've came across this page https://www.tumblr.com/examples/share/sharing-links-to-articles.html which shows a possible way to customly create a share URL for tumblr.
Simplified version of what they have:
Click to share
http://jsfiddle.net/m5ow6bhs/2/
This will take you to the log in page or straight to the share page if you're already logged in. However, if you change the http%3A%2F%2F part to a simple http:// it will now load to a "Not Found Page". http://jsfiddle.net/m5ow6bhs/3/ What the hell Tumblr?
Do you guys have any idea what's going on or what's the correct code to share something to Tumblr?
Cheers.
As with most share services, the URL should be passed as an encoded string. This supports the OPs comments about http%3A%2F%2F(encoded) and http:// (raw).
Tumblr provides variable transformations in the theme operators to handle encoding, but sadly it doesn't work with custom variables.
One quick solution is to drop the http:// part. Example: http://jsfiddle.net/L9jd8dhz/
I have discovered as of recently that the share URL needs to be updated as such:
https://www.tumblr.com/widgets/share/tool?shareSource=legacy&canonicalUrl=<-urlencode(share_url)->&posttype=link
The &posttype= seems to be a new requirement to make the share work correctly.

Add Page Tab Dialog not working via URL

According to add to page documentation you should be able to add an app to a page via a URL. The documentation lists two ways of defining the redirect URL next and redirect_uri
I have tried creating the URL using both methods but get redirected to a Facebook error page from both of them which states:
Sorry, something went wrong. We're working on getting this fixed as
soon as we can.
Is there something wrong with how I am creating the URL?
string.Format("https://www.facebook.com/dialog/page?app_id={0}&display=popup&redirect_uri={1}", appId, HttpUtility.UrlEncode(redirectURL));
and
string.Format("https://www.facebook.com/dialog/page?app_id={0}&display=popup&next={1}", appId, HttpUtility.UrlEncode(redirectURL));
UPDATE: It does work via the JavaScript SDK. Any reason why the link I am trying to generate above aren't working?
if you are not using the JS-SDK, you should specify the redirect_uri. Most likely the next parameter is from an old implementation and no longer in use.
you are calling the wrong endpoint /dialog/page, it should be /dialog/pagetab:
Example:
string.Format("https://www.facebook.com/dialog/pagetab?app_id={0}&display=popup&redirect_uri={1}", appId, HttpUtility.UrlEncode(redirectURL));

Facebook App Setup

I created FB application that use iframes, and it's working okay, as it should, BUT I need to check from what page is calling it.
I want different pages to pass different variables to that iframe location.
I already know how to set up it to three levels ( original page, application page, and on tab page, with different display content ), but I need to check from what page it's called.
I am thinking that it can be done in 2 ways:
1 way: Find way to pass specific variable based on page that is using this application as tab, and then redirect it to right location
2 way: Find way to create new application outside facebook ( maybe API or something ) and then enter all those values including: App name, app link that have this variable included, app tab link, using iframe and not FBML...
I will love to use 2. way...
I'm not asking you to show me code, I know that I need to do my job, I'm not asking you to do it for me, I'm just asking for help, for directions from someone who already create something like this, to point me to right direction where can I find way...
Also, please don't tell me to read bunch of stuffs, like FB Documentation or whole book that have all other "not-used-here" stuffs, I need specific part where there is a word about this...
If someone know anything about this, write it here...
Thank you!
The "page" parameter is passed along within the "new" signed_request parameter on (iframe) tabs. You get what you need for "free" ;)
page: A JSON object containing the page
id string, the liked boolean if the
user has liked the page, the admin
boolean if the user is an admin. Only
available if your app is an iframe
loaded in a Page tab.
http://developers.facebook.com/docs/authentication/signed_request/

redirect on facebook app install

Upon install of my app on a Facebook Page, I'd like to send the user to an URL with further instructions. I'm starting the installation with http://facebook.com/add.php?api_key=app_api_key&page=page_id, which installs but redirects the user to the Facebook Page itself. It seems like various forms of redirect were available at some point:
Post-authorize callback URL. I can no longer find that in App settings.
The next parameter for add.php. I can't seem to get this to work
I have seen some apps that do redirect upon install, so I believe this is possible. Maybe it's using an old Post-authorize setting that's no longer visible?
Any help or point would be greatly appreciated! I'm also not attached to using add.php, if there's a Facebook Connect method that does this I'd use that instead (I'm looking at profile.addtab though that doesn't seem to work either).
You can set the redirect URL in the app properties. You can no longer set it from the developer control panel in Facebook, but you can still set it using the REST api.
The list of app properties is here: http://developers.facebook.com/docs/appproperties/
To set the "post_authorize_redirect_url" you would use something like this:
https://api.facebook.com/method/admin.setAppProperties?
access_token=CURRENTTOKEN&
properties={'post_authorize_redirect_url':'http://mydomain.com/post_authorize_folder/'}
I am not completely clear on this, but I believe the url needs to point to a folder, terminated with "/" rather than a specific file.
The callback gets two parameters:
installed = 1 (true)
fb_page_id = the page id when your app was installed
First page that Canvas is point to should have
< script type='text/javascript'>top.location.href = 'REDIRECT-URL';< /script>
So when your app is opened it will automaticaly redirect to REDIRECT-URL
I'm not sure that you can avoid opening of application canvas page after installing application.