I want to show a progress bar with a button on the right side as in the image below. The margin on the left and right should be visually equal. Instead, the spacing on the right is larger than on the left. This is because the IconButton I'm using adheres to material design and has a bunch of extra space around it.
My code places the progress bar in a Row. Above it I also have a label in a Row. I want the right-aligned label to be aligned to the button. What's the correct way to align taking into consideration any padding that material design might have added?
Here's what my code looks like:
return Container(
padding: 10,
child: Column(
children: [
Row(children: [Text("Left aligned text"), const Spacer(), Text("Right aligned text")]),
const SizedBox(height: 10),
Row(children: [
Expanded(
child: LinearProgressIndicator(backgroundColor: Colors.darkBlue, color: Colors.blue, value: 55, minHeight: 20)),
IconButton(
icon: Icon(Icons.stop_circle_outlined),
padding: const EdgeInsets.all(0),
)
])
],
));
I don't think there is a way to do this. I wound up just making my own version of IconButton without the padding.
Related
Display:
Code
Card(
child: Wrap(children: [
Text('Hi. What\'s your name?'),
Container(
constraints: BoxConstraints(minWidth: 300), child: TextField())
]))
Demo
https://dartpad.dev/65527c29343bd9afca842dff66907e6f?null_safety=true
What's needed
I would like for the TextField to run adjacent to right of the Text. It should have a minimum constraint width of 300. Then if the available space to the right of the Text is less than 300, it should wrap and place itself below the text.
Basically, I need to implement similar method to Expadable for the TextField that only covers the first run of the Wrap.
Problem
The TextField automatically extends to the largest possible width.
Because this is a Wrap, it automatically sends it below the initial Text where it has the most available width.
Use Row Widget instead of Wrap and expand the text
Card(
child: Row(children: [
Expanded(child: Text('Hi. What\'s your name?')),
Container(width: 300, child: TextField())
]),
),
I have an horizontal SingleChildScrollView widget with variable amount of different buttons. I want to display button with right arrow only when there is too much buttons to show all on screen. I want to avoid situation when someone could dont know about more buttons hidden behind right edge of the screen.
How to achieve this?
Container(
height: iconsBarHeight,
color: Theme.of(context).scaffoldBackgroundColor,
padding: const EdgeInsets.fromLTRB(16, 16, 8, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Button2(),
Button4(),
Button1(),
Button6(),
Button7(),
Button3(),
Button2(),
],
),
),
);
you can add ScrollControlller to SingleChildScrollView, and get the max extent of it. If max extent is greater than width of screen, then show the button.
scrollController.position.maxScrollExtent
I am trying to make a layout as seen in the image in Flutter, but I don't get how to create a background with two colors and an overlapping button.
I don't know if there is a widget able to do this or need some code...
Any suggest or help will be great! (this was my very first post ever, sorry if there is something wrong about it!!)
Thanks.
Do something like this.
body: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 300,
color: Colors.grey,
),
],
),
Positioned(
top: 280,
left: 50,
right: 50,
child: RaisedButton(
color: Colors.white,
child: Text("Your Button"),
onPressed: () {},
),
)
],
),
you will get
Let me know if it works
One possible approach is to use a Stack. Set the background color to your grey (i think, color blind), add the white piece as an image positioned at the bottom. Lastly add your button, again positioned at the bottom.
On closer inspection of your image, I now see that what I thought was an image at the bottom was actuall just a color. All you need are two Container s and a button in a Stack. The first Container should fill the whole space, the second Container should have a height setting (be responsive here for multiple device sizes) and lastly add your RaisedButton.
I can't figure out what's giving this button extra width/padding. The image used is cropped so has no spacing to the left or right and you can see in the attached screenshot from the dev tools that it doesn't occupy the width. Somehow the button has extra width but I don't know where it's coming from.
I have another identical button next to it and with the added space it's causing overflow.
Changing the image size with the width parameter doesn't affect the amount of space the material button takes up either. It seems to be a fixed size.
This is the whole code:
Scaffold(
body: Row(
children: <Widget>[
MaterialButton(
child: Image.asset("images/male.png", width: 33)
)
],
),
);
I also tried other buttons like FlatButton and RaisedButton but they are the same with this additional width/padding. I also tried setting padding with on the button to EdgeInsets.all(0) but that doesn't change anything either.
The extra space is from the minWidth default value which is taken from the current ButtonTheme (you can see that from the MaterialButton source code). You can remove the extra space by adding minWidth to 0 and padding to 0 to your MaterialButton widget. Something like this:
Scaffold(
body: Row(
children: <Widget>[
MaterialButton(
padding: EdgeInsets.all(0),
minWidth: 0,
child: Image.asset("images/male.png", width: 33),
)
],
),
);
Use a container, where you can specify the width
Scaffold(
body: Row(
children: <Widget>[
new Container(
width: 33,
child : MaterialButton(
child: Image.asset("images/male.png")
),
],
),
);
As you can see, the face icon on the right is being clipped and I'm not sure why.
Here is my code:
new Container(
padding: new EdgeInsets.fromLTRB(style.wideMargin, style.wideMargin * 2,
style.wideMargin, style.wideMargin),
decoration: new BoxDecoration(backgroundColor: Colors.white),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new PrecisionTextOverflow(
'Name of a thing',
lineWidth: style.longLineWrappingWidth,
mainTextStyle: style.blackParagraphText),
// Because PrecisionTextOverflow paints itself directly, the UI
// doesn't know its size so we use a blank Text object to make the
// column center itself correctly.
new Text(' '),
],
),
),
new Transform(
transform:
new Matrix4.translationValues(0.0, -style.defaultMargin, 0.0),
child: new IconButton(
padding: EdgeInsets.zero,
icon: new Icon(Icons.face,
size: style.headingText.fontSize,
color: style.favoriteColor[isItemFavorite]),
onPressed: favoritePressed,
),
),
],
),
)
That PrecisionTextOverflow is a class I made of a StatelessWidget that uses a CustomPainter to paint text on the screen. I don't imagine it's related to the issue at hand, but just FYI.
I've tried removing the padding from the outer container but it doesn't help. I've tried adjusting the transformation to shift the icon to the left but it just shifts it in its clipped form. What am I doing wrong? How can I correct this?
Edit:
Okay, I did a render tree dump and it looks like the enclosing Row sets its height as 24.0, which passes on down to the IconButton which gives itself a size of (24.0, 24.0). Is there a way to increase the height of a Row? Or should I rethink my whole structure?
You're setting the size on the Icon, rather than the IconButton. If you move the size argument to IconButton it should work.
What's going on is that the IconButton is defaulting to 24.0, and since you have it in an unbounded space it's being size-limited to 24.0 via a LimitedBox. It then tries to pass that size down to the Icon via an IconTheme inherited widget, but the Icon has been told to ignore that and be size 30.0 regardless.
I'll improve the docs.
I had the same problem for a different reason
Wrapping the IconButton in a Container with a fixed height and width can cause it to clip like in the example.