Off-screen flutter_swiper slide layout, Stack / Positioned widget - flutter

Question

I am trying to achieve this layout and content using Flutter:
https://i.imgur.com/oqiZqHb.png
If I try to offset by -20 using a Positioned widget to have the sticky scroller feature of the flutter_swiper package hide on part of the screen and have the side headers on top of that to cover it I get:
I/flutter ( 6060): Another exception was thrown: A RenderFlex overflowed by Infinity pixels on the bottom.
Removing the Positioned Widget gets the part of the layout working, I might need an additional card in this example but I am struggling to get the slider to offset and have the correct swipable item proportions 141x118 on the Stack with 12 padding right and the third one slightly showing on the right but the widget starting point clips the first one as well.
https://i.imgur.com/AfjqIag.jpg
This is my code for the horizontal slider widget:
import 'package:flutter/cupertino.dart';
import '../../../theme/styles.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:math';
class HorizontalIndicator extends StatefulWidget {
const HorizontalIndicator({
Key key,
}) : super(key: key);
#override
_HorizontalIndicatorState createState() => _HorizontalIndicatorState();
}
class _HorizontalIndicatorState extends State<HorizontalIndicator> {
#override
Widget build(BuildContext context) {
var rnd = new Random();
var next = rnd.nextInt(10) * 1;
double screenWidth = MediaQuery.of(context).size.width;
return Container(
height: 120,
padding: EdgeInsets.only(top: 0),
width: screenWidth,
child: Stack(
overflow: Overflow.visible,
fit: StackFit.expand,
children: <Widget>[
Container(
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.symmetric(vertical: 6),
decoration: new BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(26)),
boxShadow: [
BoxShadow(
color: ThemeColor.shadowColor,
blurRadius:
3.0,
spreadRadius:
0,
)
],
),
child: Padding(
padding: const EdgeInsets.only(right: 12),
child: ClipRRect(
borderRadius: BorderRadius.circular(26),
child: Image.network(
"https://picsum.photos/150/120?" +
"$index" +
"$next",
fit: BoxFit.cover,
),
),
),
);
},
itemCount: 10,
viewportFraction: 0.43,
scale: 1,
itemWidth: 150,
itemHeight: 120,
layout: SwiperLayout.DEFAULT)),
]),
);
}
}
This is how I am positioning it:
...
Stack(
alignment: AlignmentDirectional.topStart,
fit: StackFit.loose,
overflow: Overflow.visible,
children: [
ListView(children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 85, left: 50),
child: Column(
children: <Widget>[
HorizontalIndicator(),
HorizontalIndicator(),
HorizontalIndicator(),
HorizontalIndicator(),
],
),
),
]),
//ProgressBarLarge2(),
],
),
...

Answer 1

I finally got this layout to work.
Here is how I positioned the items:
Stack(
alignment: AlignmentDirectional.topStart,
fit: StackFit.loose,
children: [
ListView(physics: ClampingScrollPhysics(), children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 80, left: 0),
child: Column(
children: <Widget>[
HorizontalIndicator(),
HorizontalIndicator(),
HorizontalIndicator(),
],
),
),
]),
ProgressBarLarge(
context, ThemeColor.primaryColor, 0.5, 48, 11, "Done", "Pending"),
],
),
This is how the horizontal widget was structured (sorry for the long code!).
I just used Stack and Positioned.fill widget with a -100 right value and tweaked the viewportFraction values:
Container(
height: 124,
padding: EdgeInsets.only(top: 0),
child: Stack(alignment: Alignment.centerLeft, children: <Widget>[
Positioned.fill(
left: 47,
right: -100,
child: Container(
child: new Swiper(
itemBuilder: (BuildContext context, move) {
return Container(
padding: EdgeInsets.symmetric(vertical: 0),
decoration: new BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(26)),
boxShadow: [
BoxShadow(
color: ThemeColor.shadowColor.withOpacity(0),
offset: Offset(0, 2),
blurRadius:
87.0, // has the effect of softening the shadow
spreadRadius:
0, // has the effect of extending the shadow
)
],
),
child: Padding(
padding: const EdgeInsets.all(0),
child: Container(
margin: EdgeInsets.all(5),
child: MaterialButton(
elevation: 0,
highlightElevation: 2,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(26.0)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 0.0),
color: Colors.grey.shade800,
onPressed: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => SeatsPage()),
);
},
child: Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 24,
top: 12,
right: 24),
child: FittedBox(
fit: BoxFit.scaleDown,
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Padding(
padding:
const EdgeInsets
.only(
top: 0,
right: 0),
child: Opacity(
opacity: 0.90,
child: Text(
"84",
style: ThemeText
.cardHeaderNumber,
textAlign:
TextAlign.left,
),
),
),
// Icon(
// Icons.more_vert,
// color: Colors.grey.withAlpha(0), // More
// ),
],
),
),
),
Padding(
padding:
const EdgeInsets.fromLTRB(
24, 2, 16, 2),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
Opacity(
opacity: 0.50,
child: Text(
"Available",
style: ThemeText
.cardText,
),
),
Icon(
Icons
.fiber_smart_record,
color: ThemeColor
.primaryColor,
),
],
))
],
),
),
],
),
),
),
),
));
},
itemCount: 4,
viewportFraction: viewportFraction,
scale: 1,
itemWidth: 140,
itemHeight: 120,
layout: SwiperLayout.DEFAULT)),
),
]),
),