When I started my first flutter web business application my goal was to place the MaterialApp navigator just inside the place where I want all pages to be loaded. Therefore I used the MaterialApp builder to accomplish that. This builder gives me the context and navigator and I can return the widget tree I desire.
Everything was great, I created and returned a widget tree that looked like the code below:
Scaffold(
appBar: MyAppBar(),
body: Row(children: [
MySideBar(),
Expanded(
child: navigatorFromTheMaterialAppBuider,
),
]),
)
By doing this way I have a fixed sidebar and appbar, and all pages are loaded without any rebuild on the fixed part.
The problem began when I needed to place some widgets that depends on the Overlay class inside my sidebar. Because sidebar is outside the MaterialApp navigator an overlay can't be found. Another side effect of doing this kind of layout was that any widget placed inside my pages and therefore inside the navigator displayed its overlay entries with the exact offset of the sidebar width and appbar height.
To avoid change that layout structure and make appbar and sidebar part of every page of my web application, I'd like to know if there is a way of placing an Overlay above the navigator (or even above the MaterialApp widget) that can override the MaterialApp navigator overlay for the entire tree of widgets.
I created a dartpad sample code to make it clearer.
https://dartpad.dev/140e1e8a9ca0620301b43d0313e20bdb
Related
Need a Calendar Widget inside Stateful widget.
when i triggered DatePicker widget its show like a Dialog widget (ref below image)
but i need widget inside the stateful instead of overlay popup widget need inside it (ref below image)
can anyone help me out :
i tried using flutter_calendar_carousel plugin but in that plugin changing of year is a Big challenge .
I'm new to flutter and I want to make an application like WhatsApp
I decided to know design dimensions and I went to
I found the dimensions in dps when I applied the stated dimensions on the app bar this was the result while this is the original app bar, so how can I apply material design dimensions (dps, px, etc...) in Flutter
All material design widgets in Flutter satisfies material design guidelines by default. For example a Floating action button comes with a default marigin witch you don't need to specify manually. So you don't need to provide custom padding or marigin to your appbar action items.
You can wrap any widget in a Container. Than you can set width and height if it has none.
A lot of widgets do have it though.
For example, IconButton that you can put in actions of AppBar has iconSize
IconButton(iconSize: 36.0,icon: Icon(Icons.search,));
But if you want asymmetrical touch field you can combine few widgets together
InkWell(
child: new Container(
width: 36.0,
height: 24.0,
child: Icon(
Icons.search,
),
));
There are many combinations available, so its best to ask specific question for a specific component.
I have a screen in my react-native app where I am showing details of a record. It's a pretty simple screen where on the left column, I have a label describing the item and on the right, I have the value of the item. For one of the values, I have to render a ListView and I am not able to properly align it. Below is the sample app on rnplay with the symptoms:
Sample app on rnplay
Please run on iOS. Here ComponentListView is a reusable component that I am using to render ListView and it takes a component and data as it props and render each entry in the data using the passed in component. Here the list is BackupList and the component to render in each row is BackupSummary. If you run the app, you will observe that the backups are not aligned properly. I ran it in the Inspector on the simulator and looks like the ListView starts from where Varun Accepted is seen. I am not sure why. Right now there is just one item in the this.props.backupContacts but there could be more. I have tried many different flexbox properties such as alignItems, justifyContent, alignSelf in order to get it to work with no success.
Please let me know if you know how to fix it.
Put your ListView inside a View and apply css on View, something like this
<View style={{display:'flex', flexDirection:'row', justifyContent:'center'}}>
<ListView/>
</View>
I am working on an App in which I have an icon on Action Bar.When I click on this Action Bar icon then an EditText should come on the top of layout(below Action Bar) and all of the other data on layout should shif down.I am using Relative Layout.
I know how we can dynamically add view in relative layout.But here I have to add item on top on layout, while there is also some view on top before clicking the icon.
Try the below if it works for you, this is what you'll need as per my understanding of your question.
EditText et = new EditText(this);
empty.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
et.setText("Dynamic EditText!");
et.setMinLines(1);
et.setMaxLines(3);
relativelayout.addView(et);
// assuming you already have your relative layout and the rest declared.
I am having trouble while using the YUI panel as a dialog.
I have a dialog object created with javascript on page load:
$J = jQuery;
dialog = new YAHOO.widget.Panel("dialog", { width: "300px", fixedcenter: true, close: true, draggable: true, zindex: 4, modal: true, visible: false });
Then when I call my loadDialog() function from event on the page:
dialog.setBody("<iframe id=\"ifrDialog\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
dialog.hideEvent.subscribe($$F.endDialog);
dialog.render(document.body);
// Set iframe
$J("#ifrDialog").get(0).contentWindow.location.replace(url);
Then the tricky part was that I needed to resize the Panel and the IFRAME object AFTER the IFRAME finished loading its document. I got the width and height of the IFRAMES document and then resized the IFRAME to fit the document without scroll bars, then I resized the YUI Panel to contain the IFRAME correctly.
After this was done I make a call to:
dialog.center();
and this positions the YUI Modal Panel correctly in the center of the screen. Everything is great the first time. Originally when I wanted to close the dialog I tried to remove it from the document altogether by using the destroy() method but I kept getting a config null reference error so I simply hide the dialog now. The real problem arises when I try to show the dialog again for the same page. The Panel appears correctly as it should except now the browser window has vertical scrollbars when it shouldn't.
Is the Modal overlay growing for some reason? Is there some way to * reset * the Panel or remove it from the document so that it can be added dynamically when needed?
Also, same widget but different issue. I ran into another interesting situation after I had resized and repositioned the YUI Panel. The underlay did not grow to match the Panel's new size. I had to manually go and resize the underlay. Is there a better way to do this?
Thanks in advance for the help.
Daniel
have you thought about using:
$("yourpanel_ID").remove();
To remove the panel from the DOM,
this way, you will start with a fresh one anytimes.