How do I manually calculate layout in Flutter - flutter

Question

I would like to put the following widgets into a SingleChildScrollView, but I want the blue box to lie right below the fold when the page renders. The user can choose to scroll it into view as needed, but to start with, it is out of the view.
I see a simple way of achieving this if I could calculate the space my red and green boxes are occupying in the screen and setting the top margin of the red box to the remaining space. A complication is that the height of the red and green boxes is dynamic based on their content, as well as the width of the boxes in portrait vs landscape layouts.
Perhaps I should use a SizedBox instead of adjusting the margin of my red box, which won't be a problem. But I still need to be able to calculate the height of the blank space at the top of my layout.

Answer 1

#pskink had the right idea. Here is what I did with it in code to achieve the layout.
enum AuthWidgets { form, action, disclaimer }
class AuthLayoutDelegate extends MultiChildLayoutDelegate {
AuthLayoutDelegate({#required screenHeight}) : _screenHeight = screenHeight;
double _overlap = 50;
double _screenHeight;
#override
void performLayout(Size size) {
Size formSize;
Size actionSize;
Size disclaimerSize;
// if (formSize == null && hasChild(AuthWidgets.form)) {
formSize = layoutChild(AuthWidgets.form, BoxConstraints.loose(size));
// }
// if (actionSize == null && hasChild(AuthWidgets.action)) {
actionSize = layoutChild(AuthWidgets.action, BoxConstraints.loose(size));
// }
// if (disclaimerSize == null && hasChild(AuthWidgets.disclaimer)) {
disclaimerSize =
layoutChild(AuthWidgets.disclaimer, BoxConstraints.loose(size));
// }
if (formSize != null && actionSize != null && disclaimerSize != null) {
print('laying out children');
// Need the height of the form and action area, minus the overlap
var aboveTheFold = formSize.height + actionSize.height - _overlap;
var offsetY = _screenHeight - aboveTheFold;
offsetY += formSize.height - _overlap;
positionChild(AuthWidgets.action, Offset(0, offsetY));
offsetY += actionSize.height;
positionChild(AuthWidgets.disclaimer, Offset(0, offsetY));
positionChild(AuthWidgets.form, Offset(0, _screenHeight - aboveTheFold));
}
}
#override
bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {
return false;
}
}
class AuthLayout extends StatelessWidget {
const AuthLayout({#required this.screenHeight, Key key}) : super(key: key);
final double screenHeight;
#override
Widget build(BuildContext context) {
return CustomMultiChildLayout(
delegate: AuthLayoutDelegate(screenHeight: screenHeight),
children: [
LayoutId(id: AuthWidgets.action, child: ActionMenu()),
LayoutId(id: AuthWidgets.disclaimer, child: Disclaimer()),
LayoutId(id: AuthWidgets.form, child: SignInForm()),
],
);
}
}
class SignInForm extends StatelessWidget {
const SignInForm({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 16),
child: Container(
color: Colors.red.withOpacity(0.5),
height: 350,
child: Center(
child: Text('SignInForm'),
),
),
);
}
}
class Disclaimer extends StatelessWidget {
const Disclaimer({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 300,
color: Colors.blue.withOpacity(0.5),
child: Center(child: Text('Disclaimer')),
);
}
}
class ActionMenu extends StatelessWidget {
const ActionMenu({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 200,
color: Colors.green.withOpacity(0.5),
child: Center(child: Text('ActionMenu')),
);
}
}
By using the delegate and the performLayout function, I was able to position my widgets precisely where I needed them. I did want my red area to appear "over" the top of the green area, so I had to ensure it was added to the CustomMultiChildLayout last (or at least after the green box).
Now I have been struggling with getting this to scroll on the page, but that is a question for a different thread.