Flutter Why is container width not honoured?
Problem:
Container
's constraints wont' have any impact if the passed constraints were tight.
For example:
SizedBox.fromSize(
size: Size.fromRadius(100), // Tight constraints are passed to the Container below
child: Container(
width: 100, // No impact
height: 100, // No impact
color: Colors.blue,
),
)
Solutions:
You need to loose those tight constraints. There are multiple ways of doing it. I'm listing a few here:
Use
UnconstrainedBox
:SizedBox.fromSize( size: Size.fromRadius(100), child: UnconstrainedBox( // <-- UnconstrainedBox child: Container( width: 100, // Works height: 100, // Works color: Colors.blue, ), ), )
Use
Center
orAlign
:SizedBox.fromSize( size: Size.fromRadius(100), child: Center( // <-- Center child: Container( width: 100, // Works height: 100, // Works color: Colors.blue, ), ), )
Use a
Column
or betterWrap
:SizedBox.fromSize( size: Size.fromRadius(100), child: Wrap( // <-- Wrap children: [ Container( width: 100, // Works height: 100, // Works color: Colors.blue, ), ], ), )
A widget can decide its own size only within the constraints given to it by its parent. This means a widget usually can’t have any size it wants.
A widget can’t know and doesn’t decide its own position on the screen, since it’s the widget’s parent who decides the position of the widget.
The parent widget takes the entire space available to draw the widget, Here Container is the parent widget, and it's taking whatever space is available, so to give heigh/width to the Container, that needed to be placed inside any widget which assigns x,y position of widgets to get it to draw.
So as per the above description, Container
should have a parent that aligns Container
on the screen.
Ex: Use
Align(
alignment: Alignment.center,
child: Container(),
);
OR
Center(
child: Container(),
);
That's a little tricky but it's how Flutter works, your Container
doesn't know the constraints of the Parent, then It try to fill all the space available.
You can fix it adding an Align
Widget
_getCircleImage(String url) {
return Align(
alignment: Alignment.centerLeft,
child: Container(
width: 64.0,
height: 64.0,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage(url),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
);
}
More info : https://docs.flutter.io/flutter/widgets/Container-class.html