Add Flutter AlertDialog over slivers? - flutter

Question

My simple app is mostly a CustomScrollView of slivers. Works great, but now that I need to add AlertDialogs, I'm not sure where they'd fit among the slivers.
Below is my screen widget that creates SliverAppBar and SliverList. I inserted a test AlertDialog but am getting errors in my simulator
class QuestionsScreen extends StatelessWidget {
#override
Widget build(context) {
final List<Question> questions = Provider.of<Questions>(context).items;
return CustomScrollView(
slivers: <Widget>[
AlertDialog(
title: Text('Not in stock'),
content: const Text('This item is no longer available'),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
SliverAppBar(
bottom: PreferredSize(
preferredSize: const Size.fromHeight(48.0),
child: ChangeNotifierProvider.value(
value: Score(),
child: ScoreText(),
),
),
floating: true,
expandedHeight: 200,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
"Fixed Wing Frat\n\n\n\n\n",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
background: Image.asset(
"assets/images/PalFM_blue.jpg",
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ChangeNotifierProvider.value(
value: questions[index],
child: QuestionCard(),
);
},
childCount: questions.length,
),
),
],
);
}
}
My app widget that builds the screen is here
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
Questions questions = Questions();
questions.loadFromLocal(context).then((_) {
questions.loadFromOnline(context);
});
return ChangeNotifierProvider.value(
value: questions,
child: MaterialApp(
title: 'FRATpal',
theme: ThemeData(
primarySwatch: Colors.blue,
accentColor: Colors.lightBlue,
fontFamily: 'Lato',
),
home: QuestionsScreen(),
routes: {
UnusedDetailScreen.routeName: (_) => UnusedDetailScreen(),
},
),
);
}
Where would be a good place to insert my AlertDialog? Below are the errors.

Answer 1

The AlertDialog is not meant to be visible inside another component, but is designed to stay above everyone for a short period (for example error messages)
The AlertDialog should be pushed as a modal page. A good way to do this is to use the showDialog method.
The Flutter documentation on the AlertDialog explains how to do this.
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Not in stock'),
content: const Text('This item is no longer available'),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
}