Vertically centering an overflowing widget - flutter

I have a bit of user generated content that is restricted to a specific height. Anything over that height should be overflowing and clipped off.
I've achieved that by wrapping the content with a Wrap widget, however the extra requirement i have is that the overflowed content should always be centered in its parent, see image below
The current behaviour is the first red box, but what I'm looking for is to vertically center the content similarly to box #2
Example code I've used is:
Container(
constraints: BoxConstraints(minHeight: 40, maxHeight: 40),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
),
clipBehavior: Clip.hardEdge,
child: Wrap(
children: [
Column(
children: [
Text('Line1'),
Text('Line2'),
Text('Line3'),
Text('Line4'),
Text('Line5'),
Text('Line6'),
Text('Line8'),
Text('Line9'),
Text('Line10'),
],
),
],
),
)
I've tried the various alignment properties the Wrap widget offers, however none of them did the trick. Is there a specific flutter widget I can use to achieve this?

You can use a FittedBox (https://api.flutter.dev/flutter/widgets/FittedBox-class.html) with BoxFit.none (https://api.flutter.dev/flutter/painting/BoxFit.html#none) to center the child in the available space while clipping everything outside.
Container(
constraints: BoxConstraints(minHeight: 40, maxHeight: 40),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
),
clipBehavior: Clip.hardEdge,
child: FittedBox(
fit: BoxFit.none,
child: Column(
children: [
Text('Line4'),
Text('Line5'),
Text('Line6'),
Text('Line8'),
Text('Line9'),
Text('Line10'),
],
),
),
),

Related

Center-Align one flutter widget in column and position the rest around it

How do I align one widget of a column in the center and put the rest around it?
If I had a Container or so that holds the three input fields and the button and another one that is the box above. How do I align the Container in the middle and put the box in the remaining space without moving the center container?
I tried using Expanded or Flexible but couldnt figure out how to align the widgets in that kind of way.
You can use Column like this:
Column(
children: [
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 40,
width: 40,
color: Colors.yellow,
),
)),
Container(
color: Colors.red,
height: 100,
width: double.infinity,
),
Expanded(
child: Align(
alignment: Alignment.topCenter,
child: Container(
height: 40,
width: 40,
color: Colors.green,
),
)),
],
),

Fixed sized button and expanded textfield inside Row Flutter

I want to develop a UI just like Postman Desktop App. But When I add a text field and fix the sized button in a row it gives an error RenderFlex children have non-zero flex but incoming width constraints are unbounded. But I don’t want to give a fixed size to the text field through MediaQuery. As you can see in this video (Demo UI) Postman text field size is fixed when the screen size decrease it shows a horizontal scrollbar. I want the same behavior. Here is the code.
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: 300,
decoration:
BoxDecoration(border: Border.all(color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: Image.network(
ImageURL,
fit: BoxFit.fitWidth,
),
),
],
),
),
),
SizedBox(
child: Column(
children: [
Row(
children: <Widget>[
const Expanded(child: TextField()),
DarkButton("Save", () {}),
],
),
],
),
),
],
),
),
),
);
Add isDens = true in Textfield.
Just like this:
Expanded(child: TextField(decoration: InputDecoration(isDense: true),)),
this is because you use Expanded inside the SingleChildScrollView.
You can not use Expanded inside the SingleChildScrollView because it covers the maximum width or height.
Just remove SingleChildScrollView error was gone.
you may use listview for this or use CustomScrollView for that

How to vertically or horizontally center a Widget in a Stack?

The Center widget centers a widget horizontally and vertically in the center of a Stack. How can one center a widget ONLY horizontally or vertically?
Centering a widget in a Stack is possible with a Row or Column widget. Can it be done without using those widgets?
Conditions:
Cannot use Row / Column.
The size of the Stack is not known before layout (cannot use hardcoded Positioned values).
Center widget:
Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.black87, width: 10)),
child: Stack(
children: [
Center(
child: Container(color: Colors.amber, width: 50, height: 50),
),
],
),
);
Center horizontally w/Row:
Row(mainAxisAlignment: MainAxisAlignment.center)
Center vertically w/Column:
Column(mainAxisAlignment: MainAxisAlignment.center)
The alignment above is the desired result. Can those results be achieved with other Flutter widgets?
Use Align Widget
Align(
alignment: Alignment.topCenter, // This will horizontally center from the top
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black87, width: 10)),
child: Stack(
children: [
Container(color: Colors.amber, width: 50, height: 50),
],
),
),
)
1. For Top Center use alignment: Alignment.topCenter
2. For Center Left use alignment: Alignment.centerLeft
3. For Center right use alignment: Alignment.centerRight
3. For Bottom center use alignment: Alignment.bottomCenter

Alignment with Stack in flutter

Project
Hi,
I was trying to align some widgets inside a Stack in Flutter. My end result was something like:
I know that this can be easily achieved with a Row but I want to animate the position ot the two children so I'm forced to use stack.
My problem is simple:
Example code
return Container(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: _buildSign(),
),
Align(
alignment: Alignment.centerRight,
child: _buildSign(),
),
],
),
);
This will not render as I expected. No matter what I put in the alignment field: Alignment.centerRight and Alignment.centerLeft will always place the child to the center left.
The problem is solved only if I give a fixed width to the wrapping container. Now I understand why this happend but what if I want the container to be the size of his childrens? Label is a dynamic text so his width is unpredictable for me
Any ideas?
Thanks
Hy justAnotherOverflowUser,
In your case, you have to use Positioned Widget inside Stack Widget,
it will give you what you want.
as example:
Positioned(
left: 20.0,
child: Icon(
Icons.monetization_on,
size: 36.0,
color: const Color.fromRGBO(218, 165, 32, 1.0)
)
)
The more flexible way for such alignment is to wrap Align with Positioned.fill
The original answer was posted here Flutter: bottom center widget in stack
return Container(
child: Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.centerLeft,
child: _buildSign(),
),),
Positioned.fill(
child:Align(
alignment: Alignment.centerRight,
child: _buildSign(),
),),
],
),
);

Flutter - How create Container with width match parent?

I use this simple widget in my Flutter app:
FlatButton(
child: Column(
children: <Widget>[
Image.asset(assets, height: 40, width: 40),
Text('Title'),
//my color line
Container(
height: 5,
width: ?,
color: Colors.blue[800],
)
],
)
)
I need color line (in buttom), with width match parent. but I don’t know how to do it.
Container(
height: 5,
width: double.infinity,
color: Colors.blue[800],
)
Use IntrinsicWidth
FlatButton(
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Image.asset(assets, height: 40, width: 40),
Text('Title'),
//my color line
Container(
height: 5,
width: ?,
color: Colors.blue[800],
)
],
))
)
Some cheatsheet
Two ways of doing this
ConstrainedBox:
It Creates a widget that imposes additional constraints on its child, which internally uses SingleChildRenderObjectWidget to add constraints over the child widget.
ConstrainedBox(
constraints:
const BoxConstraints(minWidth: double.infinity, maxHeight: 10),
child: Container(
color: Colors.blue,
),
),
SizedBox:
SizedBox simply creates a box with a given width/height and doesn't allow the child to go beyond given dimensions. It also used SingleChildRenderObjectWidget to decide the child render area
SizedBox(
width: double.infinity,
height: 5,
// height: double.infinity,
child: Container(
color: Colors.blue,
),
),
Container in a Column with no child will always expand. if you do add a child it will wrap it.
Also if you don't constrain your Column in the button it will also grow to full available height.
My suggestion to you is instead of putting an empty Container in your button's Column, rather wrap the button with a Container and give it a bottom border. This will give you your colored line on the bottom.
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 5, color: Colors.blue[800]),
),
),
child: FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min, // prevent Column to expand full height
children: <Widget>[
Icon(Icons.cake, size: 40),
Text('title'),
],
),
),
),