Say I have a main, top-level Scaffold with an appBar and and body.
I have a button in the appBar and in its onTap I do:
Navigator.push(
context,
new MaterialPageRoute(builder: (_) => new DogeWidget())
);
Now DogeWidget is also aScaffold, because I like the appBar's default rendering.
What's happening:
I see the DogeWidget slide from the bottom of the screen. It's a whole scaffold sliding, not just the body.
What I'd like to see:
The main appBar's contents change, its hamburger changes into a "back arrow". There is no slide from the bottom, just an ordinary fade.
I don't know if I should write this myself or is there something that Flutter can provide?
AFAICT, the Gallery does what I want (e.g. tap on the "typography" item) - behavior is different despite my code being an almost literate copy and paste. Why?
For a while we had a hack that made this happen by making the AppBar a Hero, but it was not a good implementation and caused more trouble than it was worth so we backed it out. That's probably what you're seeing.
There's no easy way to do this using Navigator with today's material framework, though you can certainly implement widgets on top of the widgets layer that do it if you want to. What you might be able to do though is implement it by having a Navigator inside the body of your MaterialApp, and then manually replacing the AppBar (maybe via a crossfade widget like AnimatedCrossFade).
Solving this properly is something we intend to do in due course but we are prioritising bugs and API stability at the moment so it is not something we plan to do in the near term (next few months).
Related
I have 2 tabs in my app, can i toggle the sliver appbar to act like a normal appbar when im on the second tab but remain flexible on the first one?
Without the sample code not much help could be provided.
At the very least a GitHub link to the repo.
However based on your question you could look into state management.
whereby there is conditional rendering of widget.
The page will render a normal app bar in one state and the other state render the flexible app bar.
I have the following drawer. it works as it should as long as i only want to hop between the widgets of my main drawer items.
Navigation with drawer
but inside those widgets i want to route to a new one, with a button click for example, while the drawer stays in my corner. So basically is there any way to reproduce a sticky android drawer in flutter ?
Drawer is a Scaffold property.
So when you go to another page you will normally have another Scaffold widget with its own Drawerand the previous one will be disposed.
In the new page you need to create and display the Drawer for this Scaffold but you can't keep the previous one in the corner.
Since the two widgets are independent of each other, you cannot use the same exact Drawer in the second widget.
Either you can create the exact copy of that Drawer in second one and open it on initState method or if possible instead of switching to the second, you can make the second widget as a subview inside firstWidget.
I'm trying to make a simple list editor in Dart, with Polymer, but I have some problems.
I will start by showing a screenshot of what it will look like.
design of the app
The left drawer is filled dynamically at run-time (a rest api is used to get the items).
The items are "MLayers" and clicking the button should add the corresponding "Layer" to the right part of the app.
The thing is I can't find a way to do this! I tried to launch a customEvent when the button is clicked but the method responsible of adding the new layer need the layer name (and I can't find a way to add parameters to customEvents...).
What do you recommand?
The structure of the app is:
mainApp
_ Drawer
__ MLayer
__ Layer
I think the class responsible of adding Layers should be the Drawer (in fact it contain the drawer AND the content). The Layer constructor should use the name (or ID) of the MLayer to display corresponding properties (lets say the MLayer "Dense" has properties "name" and "size"; the Layer is in fact an instance, while the MLayer is the maquette).
Thanks for the read!
EDIT: as requested, here's the code
Ok, so I didn't find the right way to do it, so I simply broke encapsulation by adding a property "MLayerDrawer" to my "MLayer" object and calling its method...
I'm still open to suggestions because this clearly isn't the right way to do it, it just work but is really dirty.
I implemented simple application according of example simple login view. Where we have login-view and main-view. But now, how I can implement on main-view MenuBar where every Items when clicked open different views. And those views are under MenuBar in same place (center on the page under MenuBar, on sample) in main-view. I tried with additional navigator(which name can be subNavigator) in main-view but we must register navigator in UI(I have got appropriate error). Second solution is that I create UI and in init method ManuBar and under it change every views(login-view, view1, view2 etc). But login-view have ManuBar and it is do not looks good. Is there any other way or are other ways to achieve something similar?
Your question is not at all clear. I suggest re-writing it. Perhaps with a sketch image.
TabSheet
Are you aware of the TabSheet widget? An easy way to switch between panes of content.
See the Book Of Vaadin, the class doc, and the live demo.
Also, look at TabSheet in the Reindeer theme as shown in this demo.
I'm developing a web application that is making use of tabs. I've run one issue that seems small, but I haven't been able to locate a solution and I'm worried it is indicative of larger problems with my code.
My application has one main page that includes a tab container with several content panes then inserted as children. I figured that having each content pane load an external HTML file and loading it that way was a good solution - it seemed to provide modular design and allow for easy changing of the contents of an individual tab. The issue I am running into now is that while everything loads correctly, I'm unable to provide anchor links in inside a tab or between tabs. Here is some sample code:
var tabs = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
title: "Metadata",
id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
/* repeat for each pane */
For my metadata page I want it to contain information about the datasets I am providing to users. Ideally, it would have a table of contents with anchor links to the proper entries. However, when I implement an anchor link, like so:
Click me to jump down the page!
<!-- some content here -->
<div id="test">We made it!</div>
The link is clickable and it does in fact bring you to the proper location, but it seems to invariably load this in a new frame that requires a user to reload the page if they wish to do anything else. I've tried playing with tag properties but it's been to no avail. I'm also hoping to be able to link between tabs (say, if a user is querying on one of the query pages I have presented them and then wants to know where a dataset came from or other information).
Here is a simple imgur album showing what happens: http://imgur.com/a/JCnlH
After clicking the link in the first image, you're sent down the page. However, the tab bar and the navigation bar of the page disappear completely, even when you scroll back up. I don't know why this is.
So, this has been a long question, but here is the core of it:
What am I doing wrong with anchor links?
To answer your first question:
You should put all JavaScript inside your main page, not inside partials. This is not considered a best practice with JavaScript because it means you will have to eval() the content and usually when you start doing that when you don't need to, then you're doing something wrong.
In this case you can easily add all JavaScript code to the main page. If you need to wait for a specific tab to be opened or loaded, you can use the onShow or onLoad events on the dijit/layout/ContentPane widgets.
Also, when you're using ContentPane you should use the proper setters for adding content/HTML to it.
Rather than doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
dojo.byId("Splash").innerHTML = results;
});
You should be doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
Or if you don't have a reference anymore to the splash variable, you should be using registry.byId("splash").set("content", results).
About the hyperlinks, I have no idea. I'm not getting the same behavior, so could you explain a bit further on that?
Here's a (as far as I can see) working example: http://jsfiddle.net/n4515tsz/
In my case, this behavior seems to be caused by interaction of the overflow: hidden CSS property of my website's body interacting with the height: 100% property of my tab container. I didn't realize that the overflow: hidden property was set because it was part of a framework I was using. By changing the overflow property I have been able to achieve the desired behavior.