How can we create a list like this in Flutter - flutter

Question

How can we create a list UI to make it similar to the image. Like the notification centre in IOS

Answer 1

as your requirement, I've made this widget for you. This is an interesting concept and I've thought about experimenting with it but never had the will to, but thanks to your question I went my way and built this for you. Helped me gain new knowledge as well :)
Find the attached code
import "package:flutter/material.dart";
class StackedList extends StatefulWidget {
const StackedList({super.key});
#override
State<StackedList> createState() => _StackedListState();
}
class _StackedListState extends State<StackedList> {
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width * 0.85;
//list that holds the widgets to be showed in the stack.
//you can use a function to generate this list with respect to your data
//I've used a static list of Containers to simplify my process,
//feel free to tinker with it
final list = <Container>[
Container(
height: 75,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.green,
),
),
Container(
height: 75,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.red,
),
),
Container(
height: 75,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.grey,
),
),
Container(
height: 75,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.brown,
),
)
];
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
...list.map((element) {
final index = list.indexOf(element);
return Positioned(
top: 200 + (index * 10),
child: Transform.scale(
scale: 1 - (index / 20),
child: element,
),
);
})
]
//using sublist as we only want to show the first 3 elements
.sublist(0, 3)
//using reversed list as Stack works on Last-Come-First-Out
.reversed
.toList(),
));
}
}
Happy Coding Navjot!

Answer 2

You can use the ListView widget with a Card widget as the child:
ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
leading: CircleAvatar(
child: Text('${index + 1}'),
),
title: Text('Title ${index + 1}'),
subtitle: Text('Subtitle ${index + 1}'),
trailing: Icon(Icons.arrow_forward),
onTap: () {
// Handle tap on list item
},
),
);
},
)
You can view the docs for this wiget here