Flutter Sticky Footer Layouts with CustomScrollView

Creating responsive and adaptive user interfaces is a cornerstone of modern app development. A frequent design challenge that developers encounter is the "sticky footer" layout. This pattern requires a component, typically a button or a set of actions, to behave differently based on the amount of content on the screen. If the content is short and doesn't fill the entire viewport, the footer should "stick" to the bottom of the screen. Conversely, if the content is long and requires scrolling, the footer should appear at the very end of the content, after the user has scrolled down.

Consider these two common scenarios:

• Scenario A (Short Content): The screen loads with minimal content. The call-to-action button needs to be visible at the bottom of the physical screen, not floating awkwardly in the middle.
• Scenario B (Long Content): The user interacts with the app, or the screen loads with a large amount of data. The content now overflows the screen height. The same button should now scroll naturally with the content and rest at the very bottom of the entire scrollable area.

While this might seem complex, Flutter provides a powerful and elegant set of tools specifically for this kind of custom scrolling behavior: CustomScrollView and Slivers. Let's explore how to leverage them to build this dynamic layout perfectly.

Why Simpler Layouts Like Column Fall Short

Before diving into the sliver-based solution, it's helpful to understand why more basic layout widgets aren't suitable. A common first attempt might involve a Column wrapped in a SingleChildScrollView.

// A common but flawed approach
SingleChildScrollView(
  child: Column(
    children: [
      // Your main content here...
      Text('Some content...'),
      Spacer(), // This is the problem!
      ElevatedButton(onPressed: () {}, child: Text('Submit')),
    ],
  ),
)

The issue here lies with how Column and SingleChildScrollView interact. A SingleChildScrollView provides its child with an unconstrained vertical height, allowing it to be as tall as it needs to be. However, widgets like Spacer or a Column with mainAxisAlignment: MainAxisAlignment.spaceBetween need to know the *bounded* height of their parent to calculate how much space to occupy. Since the height is infinite from the Column's perspective, the Spacer will cause an error or simply not work as intended. This fundamental conflict makes this approach unviable for achieving our goal.

The Sliver Solution: Understanding CustomScrollView

This is where Flutter's sliver-based scrolling model shines. Slivers are portions of a scrollable area. You can think of them as slices of your viewport. The CustomScrollView widget is a master container that orchestrates these slivers, allowing you to mix and match different types of scrollable content with unique behaviors.

Instead of using a monolithic scrollable widget like ListView, CustomScrollView takes a list of slivers in its slivers property. This gives us granular control over the layout. For our sticky footer, we'll use two key slivers:

1. SliverToBoxAdapter: A utility sliver that takes a single, regular "box" widget (like a Container, Column, or any non-sliver widget) and makes it usable inside a CustomScrollView. We'll use this to hold our main page content.
2. SliverFillRemaining: This is the magic ingredient. This sliver expands to fill any remaining space in the viewport. It has a crucial property that controls its behavior, which we will explore in detail.

Building the Layout Step-by-Step

Let's construct the layout. The overall structure will be a Scaffold whose body is a CustomScrollView. Inside this scroll view, we'll place our slivers in a specific order.

Step 1: The Main Content Area with SliverToBoxAdapter

First, we define the primary content of our screen. This could be a form, a block of text, a list of cards, or any combination of widgets. Since these are standard box-model widgets, we wrap them in a SliverToBoxAdapter to make them compatible with our CustomScrollView.

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Your Page Title', style: Theme.of(context).textTheme.headlineMedium),
            SizedBox(height: 20),
            Text('This is the main content of the screen. It can be short or long.'),
            // ... more content widgets go here
          ],
        ),
      ),
    ),
    // The next sliver will go here...
  ],
)

Step 2: The Flexible Footer Area with SliverFillRemaining

This is the most critical part of the implementation. After our main content, we add a SliverFillRemaining. This sliver will intelligently occupy the rest of the screen's vertical space. The key to our desired behavior is the hasScrollBody property.

• hasScrollBody: false: When set to false, this tells the sliver to fill the remaining viewport space but not to become the primary scrolling body itself. It acts like a flexible spacer. If the preceding slivers (our content) are shorter than the screen, it expands to push its child to the bottom. If the preceding slivers are longer, this sliver effectively has zero height, and the content scrolls naturally. This is exactly what we need.
• hasScrollBody: true (Default): If set to true, the sliver would attempt to fill the entire viewport and make its own child scrollable, which would break our layout and is not the behavior we want for a footer.

Inside the SliverFillRemaining, we can place our footer content. A common pattern is to use an Align widget to ensure the button is pinned to the absolute bottom of the space provided by the sliver.

// ... continuing from the previous snippet
SliverFillRemaining(
  hasScrollBody: false, // This is the crucial part!
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16.0),
      color: Colors.grey[200], // Optional: give the footer a background
      child: ElevatedButton(
        onPressed: () {
          // Handle button press
        },
        child: Text('Sticky/Scrolling Button'),
      ),
    ),
  ),
),

By combining these two slivers, we have created a layout that seamlessly adapts to the content length, as demonstrated in the animation below.

In the GIF, you can see that when the list of items is short, the button stays fixed at the bottom. As more items are added, the entire view becomes scrollable, and the button correctly moves to the end of the list.

Complete Runnable Example

To solidify the concept, here is a full, runnable Flutter application. You can copy and paste this code into a new Flutter project to see it in action. The example includes a button to dynamically add more content, allowing you to test both the short-content and long-content scenarios.

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(
      title: 'Flutter Sticky Footer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const StickyFooterScreen(),
    );
  }
}

class StickyFooterScreen extends StatefulWidget {
  const StickyFooterScreen({super.key});

  @override
  State<StickyFooterScreen> createState() => _StickyFooterScreenState();
}

class _StickyFooterScreenState extends State<StickyFooterScreen> {
  final List<String> _items = List.generate(3, (index) => 'Item ${index + 1}');

  void _addItem() {
    setState(() {
      _items.add('Item ${_items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sticky Footer with Slivers'),
      ),
      body: CustomScrollView(
        slivers: [
          // Sliver 1: The main content area
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Dynamic Content List',
                    style: Theme.of(context).textTheme.headlineSmall,
                  ),
                  const SizedBox(height: 8),
                  const Text(
                    'When this list is short, the button below will stick to the bottom of the screen. When it gets long enough to scroll, the button will scroll with it.',
                  ),
                  const SizedBox(height: 16),
                  // A button to add more content to demonstrate scrolling
                  Center(
                    child: OutlinedButton.icon(
                      icon: const Icon(Icons.add),
                      label: const Text('Add More Content'),
                      onPressed: _addItem,
                    ),
                  ),
                  const SizedBox(height: 16),
                  // The dynamic list of content
                  ..._items.map((item) => Card(
                        child: ListTile(
                          title: Text(item),
                          leading: const Icon(Icons.check_circle_outline),
                        ),
                      )),
                ],
              ),
            ),
          ),

          // Sliver 2: The flexible footer that fills remaining space
          SliverFillRemaining(
            hasScrollBody: false, // CRITICAL: This makes the magic happen
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                // Adding a border and background for visual clarity
                decoration: BoxDecoration(
                  color: Theme.of(context).canvasColor,
                  border: Border(
                    top: BorderSide(color: Colors.grey.shade300, width: 1.0),
                  ),
                ),
                padding: const EdgeInsets.all(16.0),
                width: double.infinity,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(vertical: 16.0),
                  ),
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Button Pressed!')),
                    );
                  },
                  child: const Text('SUBMIT ACTION'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Conclusion and Best Practices

The combination of CustomScrollView, SliverToBoxAdapter, and SliverFillRemaining(hasScrollBody: false) provides a robust, efficient, and declarative solution to the common sticky footer problem in Flutter. It correctly handles both short and long content scenarios without complex logic or layout calculations.

Key takeaways:

• Embrace Slivers for Custom Scrolling: When your layout involves complex scrolling behaviors, reach for CustomScrollView and slivers instead of trying to force widgets like Column into a scrollable context.
• Remember hasScrollBody: false: This property on SliverFillRemaining is the linchpin of this entire technique. Forgetting it will lead to unexpected layout behavior.
• Performance is a Plus: Slivers are built for performance. They are lazily rendered, meaning Flutter only builds and renders the portions of the scroll view that are currently visible. This makes the sliver-based approach highly efficient, even for very long lists of content.

By mastering this pattern, you can create more professional and intuitive user interfaces that gracefully adapt to dynamic content, enhancing the overall user experience of your Flutter applications.