I have a basic layout for a webapp I'm trying to build with flutter. Basically there is a navbar on the left side of the screen and the content should fill the rest of the page.
Whenever a user clicks a link in the navbar, the content should update accordingly. I have an understanding on how this would work with the "old" Navigator and named routes. However, users need to be able to access certain content directly by url and the url may contain parameters, so do I have to use a Router?
From my (limited) understanding, I have to use MaterialApp.router to use a Router, but this will always redraw the WHOLE page, including the navbar.
Is there an option to update only the content part, without updating the surrounding layout?
Thanks in advance!
Go check out navigationRail in flutter, if that helps.
Related
I'm currently working on updating a Flutter Web app to support sharing pages via URLs. I currently have a screen that uses a TabBar, and shows different views based on the selected tab. I want to be able to do two things:
Update the URL when a tab is selected (e.g. append §ion=tabName to the URL)
Paste the URL into a new browser tab and have the application open on the tab specified by the URL
The second part of this was simple enough, just take the §ion=... argument and use that to set the initialIndex of the tab controller. Updating the URL however seems quite difficult.
I've tried using RouteInformationParser to generate a new route from a list of arguments, but that triggers the onGenerateRoute callback and just seems to re-navigate to the page with the initialIndex updated from the new URL. I can get around this by replacing the TabBarView with a nested Navigator that navigates to the selected tab's content, but it seems like this could quickly become quite clunky if you wanted to navigate deeper than just a selected tab.
A simpler option I've seen mentioned is window.history.replaceState, which seems a lot simpler but feels like a bit of a kludge. Are there any ways of doing this that I've missed?
Thanks!
It's a little hacky, but I was able to force a URL change on tabbed navigation by using the TabBar.onTap, which provides the tab index, and having navigation happen through that. It ruined the nice slide action, but I got the custom URL in the address bar, which was more important for my use.
The webpage I'm loading contains a HtmlElementView class which will load an URL. And I am having an action in app bar and when I am tapping on a option, It is not responding.
In the reference image the account settings option is clickable because it is outside the HtmlElementView but the others two options are not clickable because it is on top of the HtmlElementView. Help me with an solution for this.
There seems to be no in easy way of dealing with this in flutter.
So the best option is to use pub.dev/packages/pointer_interceptor
Thanks to #Pat9RB for finding this!
Im sorry, Ive been working with flutter from 3 months and this is the first time i had to come accross website and my app. I know that we can load webpages inside our app, and also we can load http data to our app. But when using http, we can only use websites of jsonplaceholder types. Am i right?
But I want to load simple websites text into my app, is that possible without jsonplaceholder? I want to access its body and use it as texts in multiple parts of my code. Is that really possible or should i hardcode it ? Can I find some Help!
Why are you not using Webview for that?
In CMSs like Joomla, you can use &tmpl=component to show the inside of the webpage body. I think that the other CMSs have the same option.
For example:
yourwebsite/index.php?option=com_ebarge&view=ebuserschoolinfo&layout=edit&tmpl=component
You can embed your link like above in your Webview.
Edit according to comments:
For setting appBar heading as webpage header or something like that, there is no other way without using the Webview widget inside other widgets. For example, you can add your Webview inside Scaffold so you can set your custom AppBar on top of Webview. With initialHeaders of Webview, you can communicate with your webpage.
I've been trying to find a solution but I can't find any.
I'll use basic examples so anyone who knows ionic can understand my problem well.
ionic start myApp tabs will create a new project with tabs ready to go.
Those tabs are Dashboard, Chat and Settings.
When you go to the Chat Tab you will then select a person to view its chat content (which directs you to the Chat-Detail Page in actuallity)
I wanted to hide the ion-tabs directive when I go to the chat-detail page so I can force the user to use the Back button instead of clicking anything on the ion-tabs.
Simply put : you will have a hard time doing that. At best it will not look good, IF you succeed to hide using css (I did it, and really, it's not pretty). Basically you would need to define a variable on the parent scope, that changes when entering the chat-detail state, and bind it to ng-class directives on multiple elements (the ion-tabs to hide it, the ion-content to translate it up to cover the area where the tabs were, and add some transition to make it not too brutal).
The logical thing to do would be to have the chat-detail state not being a child of the state containing the tabs. The problem you will have, though, is that there is a huge bug going to / from tabbed state. See details here : https://github.com/driftyco/ionic/issues/2997
At the end of this discussion you can find some posts by Jason and Jerrybels (that would be me), that could lead you on the right way to do it. Basically, you will have to get rid of the ion-tabs directive, and use Ionic's CSS for tabs instead, doing all the states manipulations yourself.
Good luck !
You can use "hidden" attribute of ion-tab like this -
<ion-tab hidden={{condition}}" />
Using this we can show/hide tab.
I'm trying to understand how Facebook implements the chat sidebar. It seems to stay there even as I change pages. For example, if I select some text inside the sidebar, then click to go to another Facebook page, the text remains selected. It's as if it was a separate frame, but when I look at the code, it's not.
All requests are made trough AJAX calls. Only "content" container is replaced when needed.
You don't actually "go" to another page. Just the "content" div gets updated.
There is a container DOM element called "fb_content", its content is replaced through straight-forward AJAX or more technically XMLHttpRequest. (Although when for example you enter an app, the entire page is refreshed.) To update the address bar they use the JavaScript History API.
In addition to what Zeno and lericson said (fb_content gets updated via ajax), the address bar also gets updated while maintaining the history (if you press back/forward).