🦋How to handle a scrollable list of various widgets in Flutter

Hey there Devs, I have a quick update for a reusable flutter widget I created during my current project.

The task is to create a scrollable List containing various widgets, on a page, where there is also a widget on the bottom of the page possibly cover some items from the list.

The widget I came up with for my shared folder is the following:

import 'package:flutter/material.dart';

class SettingList extends StatelessWidget {
  final List<Widget> children;
  double height;

  SettingList({required this.children, this.height = 96}) {
    children.add(
      SizedBox(height: this.height),);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: children,
      ),
    );
  }
}

The SettingList widget simply is a SingleChildScrollView wrapping a column to make it possible to contain various widgets. The height value can be overridden and is used for a SizedBox widget to add some Padding on the Bottom.

To handle the mentioned Challenge I put both the widget for the bottom and those for the list inside a Stack Widget to handle them (shown below):

Stack(
        children: [
          SettingList(children: [
            ListOfWidgets
          ]),
          BottomWidgetWithAlignment
        ],
      ),

With some adjustments you can create a similar widget handling also space on the top.

I hope this quick example helps you one day, when you have a similar problem. If you wanna see my current project head over to Github at https://github.com/lucianojung/flutter_package_examples (the corresponding widget is currently in a feature branch)

If you wanna know more about my project head over to medium and get to know a new useful flutter package every week https://medium.com/@lucianojung

Fyi: the solution prevents the following error:

This post is also available on DEV.