🦋How to handle a scrollable list of various widgets in Flutter
Luciano Jung
Posted on June 3, 2021
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
Posted on June 3, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.