Flutter Question posted in
The official Flutter documentation can be found here.

How to Ensure Footer is Always Off-Screen and Requires Scrolling in Flutter?

I’m developing a Flutter application with a custom scaffold that may contains a list of items in the body or any other widget. I want to add a footer at the bottom that is initially off-screen, requiring the user to scroll down to see it, regardless of the amount of content above it.

The footer should not be visible when the user first navigates to the screen, even if the widgets do not fill the entire height of the screen. The footer should only come into view after the user scrolls down.

body: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.maxHeight,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              body,// Content provided from the app
              footer,
            ],
          ),
        ),
      );

Above is what I have tried so far. How can I modify my code so that the footer is always off-screen initially, and the user must scroll to see it, even when the body content is not tall enough to fill the screen?

Tags:

2

Answers


  1. 0

    You should wrap your child widget with a ConstrainedBox which takes as minHeight the one provided by the LayoutBuilder or your MediaQuery. Beware, that if that child widget is also scrollable you should provide the correct scroll controller:

    class ScrollableWidget extends StatelessWidget {
  ScrollableWidget({super.key, required this.child, required this.footer, final ScrollController? controller})
      : controller = controller ?? ScrollController();

  final ScrollController controller;

  final Widget child;
  final Widget footer;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          controller: controller,
          child: Column(
            children: [
              ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: constraints.maxHeight,
                ),
                child: child,
              ),
              footer,
            ],
          ),
        );
      },
    );
  }
}
    Login or Signup to reply.
  2. 0

    You can use ListView and give the space like the answers before with LayoutBuilder, to create spacing just using SizedBox, and put you footer below the SizedBox.

    Simple code to demonstrate:

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            return ListView(
              children: [
                SizedBox(
                  height: constraints.maxHeight,
                ),
                Container(
                  padding: EdgeInsets.all(20),
                  color: Colors.yellow,
                  child: Text('Footer'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

    This is the result:

    demo

    Hopefully it can solve your problem, Thanks 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search