Solución:
A pesar de que la respuesta de Rémi es correcta, en realidad he encontrado una manera más fácil de lograr lo que estaba buscando simplemente combinando los LayoutBuilder
con el IntrinsicHeight
.
class ScrollableFooter extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints.copyWith(
minHeight: constraints.maxHeight,
maxHeight: double.infinity,
),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
// Your body widgets here
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: // Your footer widget
),
),
],
),
),
),
);
});
}
}
La dificultad es que Column
y SingleChildScrollView
tienen dificultades para trabajar juntos porque uno necesita limitaciones y el otro las elimina.
El truco es usar un CustomMultiChildLayout
y haz los cálculos tú mismo. Ayudado por MediaQuery
para obtener el tamaño del teclado, de modo que el pie de página pueda desaparecer para dejar más espacio para el contenido.
Aquí hay un widget reutilizable que lo hace por usted:
class FooterLayout extends StatelessWidget {
const FooterLayout({
Key key,
@required this.body,
@required this.footer,
}) : super(key: key);
final Container body;
final Container footer;
@override
Widget build(BuildContext context) {
return CustomMultiChildLayout(
delegate: _FooterLayoutDelegate(MediaQuery.of(context).viewInsets),
children: <Widget>[
LayoutId(
id: _FooterLayout.body,
child: body,
),
LayoutId(
id: _FooterLayout.footer,
child: footer,
),
],
);
}
}
enum _FooterLayout {
footer,
body,
}
class _FooterLayoutDelegate extends MultiChildLayoutDelegate {
final EdgeInsets viewInsets;
_FooterLayoutDelegate(this.viewInsets);
@override
void performLayout(Size size) {
size = Size(size.width, size.height + viewInsets.bottom);
final footer =
layoutChild(_FooterLayout.footer, BoxConstraints.loose(size));
final bodyConstraints = BoxConstraints.tightFor(
height: size.height - max(footer.height, viewInsets.bottom),
width: size.width,
);
final body = layoutChild(_FooterLayout.body, bodyConstraints);
positionChild(_FooterLayout.body, Offset.zero);
positionChild(_FooterLayout.footer, Offset(0, body.height));
}
@override
bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {
return true;
}
}
Usado como tal:
FooterLayout(
body: body,
footer: footer,
),
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)