Add Flutter AlertDialog over slivers?

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.

move `AlertDialog` to a function, check this link `https://stackoverflow.com/questions/53844052/how-to-make-an-alertdialog-in-flutter#answer-53844053` — nmanikiran, Oct 17 '19 at 09:44

score 1 · Accepted Answer · answered Oct 17 '19 at 09:52

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();
          },
        ),
      ],
    ),
}

answered Oct 17 '19 at 09:52

Vinz

222
1
6

Thanks! The other part of my questions was where to make this call from? Calling directly inside a build threw errors. The piece I was missing was Future.delayed(Duration.zero, () => showDialog(context)); which is described nicely at https://stackoverflow.com/questions/52164369/show-alert-dialog-on-app-main-screen-load-automatically-in-flutter – buttonsrtoys Oct 17 '19 at 12:00
forgive me, but when would you like the alert to appear? – Vinz Oct 17 '19 at 12:09
I'd like it to appear when a ChangeNotifier receives bad data. I'm using provider and when the model receives bad data, I want to notify the user. What's working now is the QuestionsScreen is listening to my ChangeNotifier for an error state. When detected, Future.delayed/showDialog is trigger within the build method of QuestionsScreen. I don't think I want to rebuild the whole QuestionsScreen, though, so am currently looking at having a separate provider for error states that notifies a single widget listening for errors. If you have a better pattern, I'm all ears! :-) – buttonsrtoys Oct 18 '19 at 10:24

Add Flutter AlertDialog over slivers?

1 Answers1