How to stack items on top of each other? - flutter

Question

i'm trying make a widget like image below.
Mindset of me is stack item into listview. The items are stacked. But when nesting a stack into listview, the stack needs to be wrapped in a fixed widget. If you remove the listview, you cannot make it into the list as in the picture. First time there is nothing wrong to expect people to ignore.
I hope to get the answer. Thanks.
body: Container(
color: Colors.white,
width: double.infinity,
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Positioned(top: 10,child: card1(),),
Positioned(bottom: 10,child: card1(),),
],
),
),
),
Item
static Widget card1() {
return Card(
elevation: 0,
child: Container(
margin: EdgeInsets.only(top: 100),
width: double.infinity,
padding: EdgeInsets.only(top: 18, left: 18),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(offset: Offset(0, 8), blurRadius: 8, spreadRadius: 0),
],
),
child: Stack(
children: <Widget>[
Container(
width: 343,
height: 196,
child: SvgPicture.asset(
"assets/bg.svg",
),
),
Container(
padding: EdgeInsets.only(
top: 24,
left: 24,
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10),
child: Text("Vietcombank"),
),
],
),
),
],
),
),
);
}

Answer 1

I created StackedListTile, you can try it (Demo here DartPad)
import 'package:flutter/material.dart';
class StackedListTile extends StatelessWidget {
final Color color;
final String title;
final ImageProvider iconImage;
const StackedListTile({
Key key,
#required this.color,
#required this.title,
#required this.iconImage,
}) : assert(color != null),
super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
height: 90.0,
child: Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
left: 18.0,
top: 18.0,
right: 18.0,
),
padding: const EdgeInsets.only(
left: 25.0,
top: 25.0,
right: 25.0,
bottom: 10.0,
),
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
),
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.white,
child: Image(
image: iconImage,
fit: BoxFit.cover,
),
),
),
),
const SizedBox(width: 5.0),
Expanded(
child: Text(
title,
style: const TextStyle(
color: Colors.white,
letterSpacing: 1.0,
),
),
),
//TODO: Add other stuff here
const Icon(
Icons.arrow_forward_ios,
color: Colors.white,
size: 20.0,
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 4.0,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black12],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
),
],
),
);
}
}
Usage:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MainPage(),
debugShowCheckedModeBanner: false,
),
);
}
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Demo")),
body: ListView(
children: <Widget>[
StackedListTile(
title: "Techcombank1",
color: Colors.blue[600],
//iconImage: AssetImage("assets/images/1.png"), //TODO: Use this for asset images
iconImage: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfo2BL_di4IK1AuHOS4y_16BatmqdkOlcB1JBjJK2zK9sUvZ2FUg&s",
),
),
StackedListTile(
title: "Techcombank2",
color: Colors.red[600],
iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
),
StackedListTile(
title: "Techcombank3",
color: Colors.green[600],
iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
),
for(int i =0; i<100; i++)
StackedListTile(
title: "Item_$i",
color: Colors.amber.withOpacity(1-(i%10)/10),
iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
),
],
),
);
}
}

Answer 2

Try to use SliverToBoxAdapter
body: return Container(
color: Colors.white,
width: double.infinity,
child: SingleChildScrollView(
child: SliverToBoxAdapter(
child: Stack(
children: <Widget>[
Positioned(
top: 10,
child: card1(),
),
Positioned(
bottom: 10,
child: card1(),
),
],
),
),
),
),