I have application where multiple OverlayEntry widgets are on the screen. Each of the these widgets contain text. Is there a way to stack one on top of another, so that if they overlap, one will appear on top, and others hidden behind it? At the moment, when this happens, all the texts appear one of top of another and it is illegible.
Thanks
2
Don’t know how you add multiple but I tried what pskink said and was my first idea too if you give a proper background to each overlay entry you probably got what you want
class Overlays extends StatelessWidget {
const Overlays({super.key});
void addOverlay(BuildContext mainContext) {
late OverlayEntry entry;
entry = OverlayEntry(builder: (context) {
return Material(
color: Colors.white, // Your favorite background color
child: Container(
padding: const EdgeInsets.all(16),
child: Column(
children: [
TextButton(onPressed: () => entry.remove(), child: Text(DateTime.now().toString())),
TextButton(onPressed: () => addOverlay(mainContext), child: const Text('ADD OVERLAY')),
],
),
)
);
});
Overlay.of(mainContext).insert(entry);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(16),
child: Overlay(
initialEntries: [
OverlayEntry(
builder: (BuildContext entryContext) {
return Column(
children: [
TextButton(onPressed: () => addOverlay(context), child: const Text('ADD OVERLAY')),
],
);
},
)
]
)
)
);
}
}