Description:
I’m encountering a difficulty with the Slidable element in a ListView in Flutter. The habits of the Slidable element is inconsistent relying on the variety of objects within the listing.
Drawback:
- When the
ListViewdoesn’t have sufficient objects to require scrolling, theSlidableelement seems on prime of all different elements when slid. - Nevertheless, when the
ListViewhas sufficient objects to allow scrolling, theSlidableelement goes beneath different elements when slid.
Video of the issue:
Code:
/* Occasions.dart */
Widget construct(BuildContext context) {
return Container(
clipBehavior: Clip.none,
margin: const EdgeInsets.solely(prime: 5, backside: 5, left: 10, proper: 10),
youngster: ListView.builder(
itemCount: widget.lista.size,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Stack(clipBehavior: Clip.none, youngsters: [
Positioned.fill(
child: Row(
children: [
Expanded(
child: Container(
margin: const EdgeInsets.only(bottom: 6),
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(8))),
),
),
],
),
),
Slidable(
key: UniqueKey(),
endActionPane: ActionPane(
extentRatio: 0.2,
movement: const BehindMotion(),
youngsters: [
GestureDetector(
onTap: () {
delete(context, widget.lista[index]);
},
youngster: Container(
margin: const EdgeInsets.solely(backside: 6),
padding: const EdgeInsets.solely(left: 30),
ornament: const BoxDecoration(
borderRadius: BorderRadius.horizontal(
proper: Radius.round(15)),
coloration: Colours.purple,
),
alignment: Alignment.middle,
youngster: const Icon(Icons.delete_forever,
coloration: Colours.white),
),
),
]),
youngster: GestureDetector(
onTap: () {
Navigator.of(context).push(widget.motion(
fetchRep: widget.fetchRep,
knowledge: widget.knowledge,
replace: widget.replace,
motion: "mod_el",
report: widget.lista[index]));
},
youngster: Container(
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.solely(backside: 6),
// margin: const EdgeInsets.fromLTRB(10, 3, 10, 3),
ornament: BoxDecoration(
borderRadius: BorderRadius.round(8),
border: Border.all(coloration: Colours.white, width: 1),
coloration: HexColor.fromHex(widget.lista[index].coloration),
),
youngster: Row(
youngsters: [
Row(
children: [
Icon(
widget.lista[index].reportType == "R"
? Icons.project
: Icons.bookmark,
coloration: Colours.white,
dimension: 20,
),
const SizedBox(
width: 10,
),
],
),
Middle(
youngster: Textual content(
"[ ${int.parse(widget.lista[index].amount).toStringAsFixed(2)} ${widget.lista[index].unityCode} ]",
type: const TextStyle(
coloration: Colours.white,
fontSize: 14,
fontWeight: FontWeight.daring),
),
),
const SizedBox(
width: 20,
),
Expanded(
youngster: Textual content(
"${widget.lista[index].customerCode} - ${widget.lista[index].taskTypeCode}",
overflow: TextOverflow.ellipsis,
type: const TextStyle(
coloration: Colours.white,
fontSize: 14,
fontWeight: FontWeight.daring),
textAlign: TextAlign.middle,
),
),
],
),
),
),
),
]);
},
),
);
}
/* ContainerEvents.dart */
Widget construct(BuildContext context) {
return Padding(
padding: const EdgeInsets.solely(prime: 15),
youngster: AnimatedVisibility(
enter: fadeIn(),
exit: fadeOut(),
youngster: Container(
width: MediaQuery.of(context).dimension.width,
ornament: BoxDecoration(
borderRadius: BorderRadius.round(10),
coloration: Theme.of(context).colorScheme.tertiaryContainer,
),
youngster: widget.loading
? Middle(
youngster: LoadingAnimationWidget.staggeredDotsWave(
coloration:
Theme.of(context).colorScheme.onTertiaryContainer,
dimension: 80,
),
)
: Column(
youngsters: [
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
"${DateFormat.EEEE('it_IT').format(widget.selezionato)}, ${DateFormat.MMMd('it_IT').format(widget.selezionato)}, ${DateFormat.y('it_IT').format(widget.selezionato)}",
style: TextStyle(
color: Theme.of(context)
.colorScheme
.onTertiaryContainer,
fontSize:
MediaQuery.of(context).size.height /
100 *
2.5,
fontWeight: FontWeight.bold)),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context)
.colorScheme
.inverseSurface,
),
onPressed: () {
showModalBottomSheet(
transitionAnimationController:
AnimationController(
vsync: Navigator.of(context),
duration: const Duration(
milliseconds: 600))
..forward(),
context: context,
isScrollControlled: true,
builder: (context) => Filterbox(
fetchRep: widget.fetchRep,
data: widget.data,
aggiornaData: widget.dayReload),
);
},
child: Icon(
Icons.filter_alt,
color: Theme.of(context).colorScheme.surface,
))
],
),
const SizedBox(
top: 10,
),
Expanded(
youngster: Padding(
padding: const EdgeInsets.solely(backside: 5),
youngster: Occasions(
knowledge: widget.selezionato,
lista: widget.lista,
motion: widget.createRoute,
fetchRep: widget.fetchRep,
replace: widget.replace),
)),
],
))),
);
}
What I’ve Tried:
- I’ve experimented with completely different Stack and Positioned configurations.
What I Need:
- I need all of the sliders to at all times be on prime of different elements.
