My question is essentially the same as How to remove Space at the bottom of TextField in flutter?, except instead of a TextFormField widget, I am asking the same for a SpinBox widget. Setting isDense: true or isCollapsed: true seems to move the number out of line with the increment/decrement buttons (see screenshots)
Meanwhile, wrapping in a SizedBox and setting height is some improvement, but I am not able to shrink height as much as I would like, or increment/decrement go below the line.
This is with a height of 25:
Having a height of 45 looks visually fine but it takes up too much space for my needs.
Current code which produces the layout below:
SizedBox(
width: 120,
height: 45,
child: SpinBox(
value: 0,
onChanged: (value) {}
),
)
Looking at the source code of the SpinBox you can see that you have the inputDecoration of the TextField exposed, and you can try removing the contentPadding of it and see if it fixes your issue :
SpinBox(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
),
);
Related
How to convert CSS Gradient
background: linear-gradient(177.82deg, rgba(138, 160, 55, 0.2) 51.9%, #8E9B5E 69.3%);
to Flutter Gradient?
you just need to know :
the hex colors of the Gradient
the direction (like at my example it's from top to bottom and to say it to Flutter, it'll be from topCenter bottomCenter)
see the code example:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.red.withOpacity(0.1),
Colors.green.withOpacity(0.8),
],
),
),
)
Note number 1:
that I just used the red and the green to make it clear for you, but you can use the hex colors like that
convert just the hashtag to 0xff like:
#8E9B5E
to
0xff8E9B5E
and you can replace:
Colors.red.withOpacity(0.1),
to be like:
Color(0xff8E9B5E),
Note number 3:
the function of .withOpacity(0.1) is just for Opacity like the percentage of the color appearance (from 0.0 to 1.0) and you can change the value of the Opacity or delete it if you want and use just Colors.red or Color(0xff8E9B5E)
I want to add a bit shadow to my Container, which I have done using Material Widget or BoxShadow but in column at bottom of fixed container I have expanded Listview when I scroll up vertically container shadow goes down of Listview which I do not want I want Shadow to appear on top of ListView Items as we Scroll vertically , That's all please help me out
...Here is my code
Material(
elevation: 2,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 2,
spreadRadius: 2,
offset: Offset(0,2),
),
],
),
height: SizeConfig.isLargeScreen ? 60.h : 105.h,
width: double.infinity,
child: !SizeConfig.isLargeScreen),),
Note: I have given elevation 3 to my Listview card as well, Please let me know what i can do to make this container shadow go above Listview while Scrolling Vertically
I guess this can be solved by using padding widget, know more about the padding widget in ( https://youtu.be/oD5RtLhhubg ).
Another way to handle the issue adding a listView with separator, divider.
Still the problem continues check with margin of the container.
Finally on top of all since this is about container shadow you can try with the offset value in boxshadow property.
share with us, which method helps you to solve the issue or how did you solved the issue by trying something different.
You have two ways to solve this issue
the first one is to wrap your Material widget with Padding widget like this:
Padding(
Material(
elevation: 2,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 2,
spreadRadius: 2,
offset: Offset(0,2),
),
],
),
height: SizeConfig.isLargeScreen ? 60.h : 105.h,
width: double.infinity,
child: !SizeConfig.isLargeScreen),),),
or simply add SizedBox(height: 20,), under the Material widget it will make some space between the Material widget and the ListView then it will solve your issue
I am having problems with my app.. When i set the fontSize on my phone it works OK but on other peoples phones due to there phone fontSize settings it is affecting the size of the text in my app.. I heard text scale factor can help but i do not know how to use it
You can use MediaQuery.of(context).textScaleFactor but I think using auto_size_text is more efficient.
EDIT 2 :
Widget build(BuildContext context){
return Text(
'Hello, How are you?',
textScaleFactor : MediaQuery.of(context).textScaleFactor,
style: TextStyle(fontWeight: FontWeight.bold,fontSize : 18),
);
}
And you can check the usage of this property from here as well as TextStyle class from here.
public var body: some View
{
ZStack{
GeometryReader { geometry in
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(width: geometry.size.width*1.00, height: geometry.size.height*1.00)
.zIndex(0)
}
}
}
I'm using GeometryReader to draw a rounded rectangle to fill up the entire watch screen, this looks fine on a 38mm watch simulator, but as I increase the watch size to 40, 42, 44mm I noticed that the height is not filling up the whole screen. I have to adjust my multiple to say 1.1 for example to fill up more of the screen.
Can someone tell me if I am using GeometryReader incorrectly?
Unless you really need the full functionality of the geometry reader, to actually measure the size of the object of the screen, then I think you could achieve the effect you want by setting the frame's maxWidth and maxHeight to .infinity and by ignoring the safe area on the bottom.
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.bottom)
}
}
Note that when you use a ZStack the order of the items in it determine the order on the screen. The first item in the stack will be at the bottom, and then each item will be layered on top.
I'm having a few issues when attempting to make the switch from extjs 4.0.7 to 4.1.1.
The first issue is as follow:
I have two treepanels which are within a column layout. One right next to the other. My app loads a bunch of nodes into the left panel, and then you can optionally move some of them to the other panel. However, the panel with all the nodes is not showing a scrollbar, and thus I can't see about 1/3 of the nodes all of a sudden. I had a semi-similar issue in 4.0.7 where I couldnt see the last node moved if the panel was full until I moved another node. I fixed that with the following lines:
treePanel1.invalidateScroller();
treePanel2.invalidateScroller();
These lines are deprecated in 4.1.1, and the problem seems to have become worse. Has anyone had a similar issue, and how do I get my scroll bar back.
A second major issue related to my UI:
I have two grids right next to each other elsewhere, layed out similarly to the treepanels. I've set up drag and drop between the two grids. Again all the nodes start in the left grid, with the option to drag some into the right grid. However, the right grid is now not showing at full size, it is defaulting to a sliver. So, the DD functionality is still there, if you know to drag the node to that little sliver. Afterwards, the sliver expands enough to hold the single node and so on. So, how do I get it back to defaulting full size. Why had extjs 4.1.1 caused these issues? I'd have to fat finger in any code, but can if absolutely neccessary. However, if anyone is familiar with this type of issue based on my description, that would be great.
Edit: Also, I have a combobox in the right-most column of the grids. When I click to change one of the comboboxes, a mini scrollbar thing pops up that sort of blocks the dropdown button. What have they done to this version?
Here is the layout definition where I have the first problem where the scrollbar doesn't show up on the panel when it needs to:
{
xtype: 'panel',
title: 'Select fields',
defaults: {
border: false,
height: '100%'
},
layout: 'column',
items: [
{
xtype: 'treepanel',
itemID: 'choicesTreePanel',
title: 'Choose from below fields',
height: '100%',
multiSelect: true,
store: choicesTree,
rootVisible: false,
columnWidth: .44},
{
xtype: 'panel',
columnWidth: .06,
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
margins: "15 0 0 0"
},
items: [
{
xtype: 'button',
text: '==>'},
{
xtype: 'button',
text: '<=='},
{
xtype: 'button',
text: 'RST'}
]},
{
xtype: 'treepanel',
itemId: 'chosenTreePanel',
title: 'Fields',
border: true,
store: chosenFields,
rootVisible: false,
columnWidth: .44,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop,
dragText:'
dragginggggg '
},
ddGroup: '
fieldsDD '
}
},
{xtype:'
panel ',
columnWidth:.06,
layout:{
type:'
vbox ',
align:'
center '
},
items: [
{
xtype: '
button ',
text: '
UP '},
{
xtype: '
button ',
text: '
DOWN '}
]
}
]
}
Edit: on the left panel, if I make height a set value, and autoscroll true, I have a scrollbar. If I set height '100%' and autoscroll true, there is no scroll bar. So a solution might be to find out how to have the panel fit the height of the parent, while maintaining the scrollbar
Although you are looking for a percentage based height solution, you can also use a constant value height. In many cases this will avoid your problem. For example, set the panels to 600 height, that should fix the scroller issue.
This does not solve your issue in percentage based layouts. Hopefully someone else can provide help with that.
(maybe it is best to split your question into multiple separate questions)
Concerning your first question about the panel height and scrollbar:
In your example I would ask myself the question "I want the treepanel to have a 100% height related to what?".
A column layout is typically used when you don't care about the height of the child elements related to their parent: the sum of the height of the child elements define the height of the column as you can see here: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html.
You did not define any height on the columns, so it uses the height of the child elements (which have no height in your example). I don't know what Ext does in this case, but based on this, it cannot do anything smart.
If you want the treepanel to use the whole height of the containing panel, you would use a hbox layout with the align property set to stretch.
That might fix the scrollbar too since height calculation can be done properly.
Don't forget to remove the "height: 100%" and "autoscroll" properties since they mix things up.
Finally, changing the layout of the treepanel to 'fit' might give you the result you are looking for.
Your code might become something like:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'treepanel',
layout: 'fit',
flex: 44,
...
}, {
flex: 6,
...
},{
flex: 44,
...
}]
}
I did not test this answer on your code. Please provide a full working code sample (with a dummy store) and I'll test it.