CODEWITHSUNDEEP
flutter
buttonsrtoys
buttonsrtoys

Reputation: 2771

Add Flutter AlertDialog over slivers?

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.

enter image description here

Upvotes: 1

Views: 485

Answers (1)

Vinz
Vinz

Reputation: 240

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

Upvotes: 1

Related Questions