Clash Royale CLAN TAG#URR8PPP

Flutter - How to proportionally center a view (centered with multiplier offset)

I'm wondering if in Flutter there are any good ways of imitating the iOS Xcode constraint where you center a view inside another (say, vertically), and supply a multiplier such that instead of being exactly centered (50% of the way down the parent view), it's positioned at 30% down, or 70% down, or whatever.

(Rather than use a fixed margin from the top of the screen, I'd like to "float" a header view down by 20% of the screen height...)

3 Answers
3

I found one way, but I'm not sure it's the neatest yet:

For vertical proportional centering:

Embed your layout inside a Center widget that is itself inside a FractionallySizedBox. Provided that FractionallySizedBox is at the top of the screen, by changing its heightFactor you effectively change the centering position caused by the Center widget.

Center

FractionallySizedBox

FractionallySizedBox

heightFactor

Center

new FractionallySizedBox(
heightFactor: someHeightFactor,
child: Center(
child: myChildWidget
),
);


i.e. if parentHeight = the height of the parent widget to this FractionallySizedBox, and parentY = the (absolute) y origin of that parent widget, then setting heightFactor = 0.6 would center your UI child inside a region measuring 0.6 * parentHeight, therefore with an absolute y center = parentY + 0.3 * parentHeight.

parentHeight

FractionallySizedBox

parentY

heightFactor = 0.6

0.6 * parentHeight

parentY + 0.3 * parentHeight

Horizontal proportional centering would be the same but using widthFactor on the FractionallySizedBox.

widthFactor

FractionallySizedBox

FractionallySizedBox is enough by itself to handle such layout

FractionallySizedBox

FractionallySizedBox(
heightFactor: .5,
widthFactor: 1.0,
alignment: Alignment.topCenter,
child: child,
)


This will top center a widget taking helf the height of its parent and full width

All my FractionallySizedBox efforts have been unreliable, but here's a way that's proven far stabler for me - using LayoutBuilder and SizedBox as a spacer:

FractionallySizedBox

LayoutBuilder

SizedBox

LayoutBuilder(builder: (context, constraints) => Column(
children: <Widget>[
SizedBox(height: (constraints.maxHeight - constraints.minHeight) * 0.2,),
myWidget
],
))


This way constraints give me the ability to calculate 20% of the parent height, and apply that as a spacing using a simple SizedBox.

constraints

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.