How to Add Several Widgets Inside a Scroll in Flutter

Scrollable content is a common requirement when building UIs in Flutter. Whether you need to display a long list of items or want to combine multiple widgets vertically, a scrollable view is essential. In this article, we will explore how to add several widgets inside a scroll using Flutter's CustomScrollView, SliverToBoxAdapter, and SliverList widgets.

Setting up the CustomScrollView

To begin, let's create a basic structure for our scrollable view. We'll start with a blank Flutter project and use a Scaffold widget as the root of our screen. Within the Scaffold, we'll add a CustomScrollView widget.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scrollable View'),
        ),
        body: CustomScrollView(
          slivers: [
            // Widgets will be added here
          ],
        ),
      ),
    );
  }
}

Adding Widgets to the Scroll

Now that we have our basic setup, let's add some widgets to our scrollable view. We'll start by adding a search box at the top of the screen using the SliverToBoxAdapter widget. This widget allows us to add a single non-scrollable widget to our CustomScrollView.

body: CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Container(
        padding: EdgeInsets.all(16),
        child: TextField(
          decoration: InputDecoration(
            hintText: 'Search',
            prefixIcon: Icon(Icons.search),
            border: OutlineInputBorder(),
          ),
        ),
      ),
    ),
  ],
),

Next, we'll add a list of items using the SliverList widget. This widget allows us to display a scrollable list of items efficiently.

body: CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      // Search box widget
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 20, // Replace with your actual item count
      ),
    ),
  ],
),

In the above code snippet, we have used the SliverChildBuilderDelegate to build the list of items dynamically. You can replace the childCount parameter with the actual number of items you want to display.

Finalizing the Scrollable View

To complete our scrollable view, we can add additional widgets as SliverToBoxAdapter or SliverList widgets within the CustomScrollView. Here's an example of adding a footer widget using SliverToBoxAdapter.

body: CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      // Search box widget
    ),
    SliverList(
      // List of items widget
    ),
    SliverToBoxAdapter(
      child: Container(
        padding: EdgeInsets.all(16),
        child: Text('Footer'),
      ),
    ),
  ],
),

Feel free to add more widgets as needed, keeping in mind that each widget within the CustomScrollView should be wrapped with a suitable sliver widget.

Summary

In this article, we learned how to add several widgets inside a scroll in Flutter using CustomScrollView, SliverToBoxAdapter, and SliverList. We explored how to create a basic scrollable view with a search box and a list of items. Additionally, we saw how to add more widgets such as a footer to our scrollable view.

By understanding these concepts, you can build complex and dynamic scrollable UIs in your Flutter applications. Happy coding!