2
votes

Snackbar dans SimpleDialog Flutter

J'ai rencontré un code d'erreur ci-dessous lors de l'ajout d'un snack à une méthode pressée dans mon Simpledialog. [Scaffold.of () appelé avec un contexte qui ne contient pas d'échafaud.]

Je voudrais demander votre avis sur la façon de fournir le contexte correct pour le résoudre.

import 'package:flutter/material.dart';



void main() {
  runApp(new MaterialApp(home: new AlertApp()));
}

class AlertApp extends StatefulWidget {
  @override
  _AlertAppState createState() => _AlertAppState();
}

class _AlertAppState extends State<AlertApp> {


  SimpleDialog _simdalog;

  void sDialog(){
    _simdalog = new SimpleDialog(
      title: new Text("Add To Shopping Cart"),
      children: <Widget>[
        new SimpleDialogOption(
          child: new Text("Yes"),
          onPressed: (){
            final snackBar = SnackBar(content: Text('Purchase Successful'));
            Scaffold.of(context).showSnackBar(snackBar);
          },
        ),
        new SimpleDialogOption(
          child: new Text("Close"),
          onPressed:() {Navigator.pop(context);},
        ),
      ],
    );
    showDialog(context: context, builder: (BuildContext context){
      return _simdalog;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
        new RaisedButton(
            child: new Text("Add to Shopping Cart [Simple]"),
            onPressed:(){
              sDialog();
            }),
          ],
        ),
      ),
    );
  }
}

flutter snackbar simpledialog

1 commentaires

Tout est expliqué dans cet article: stackoverflow.com/questions/51304568/...

3 Réponses :

5
votes

Solution 1: comme Mazin Ibrahim l'a mentionné dans les commentaires Scaffold.of () appelé avec un contexte qui ne contient pas de Scaffold

    Flushbar(
      title: "Hey Ninja",
      message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP,
      flushbarStyle: FlushbarStyle.FLOATING,
      reverseAnimationCurve: Curves.decelerate,
      forwardAnimationCurve: Curves.elasticOut,
      backgroundColor: Colors.red,
      boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)],
      backgroundGradient: LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: false,
      duration: Duration(seconds: 4),
      icon: Icon(
        Icons.check,
        color: Colors.greenAccent,
      ),
      mainButton: FlatButton(
        onPressed: () {},
        child: Text(
          "CLAP",
          style: TextStyle(color: Colors.amber),
        ),
      ),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: "ShadowsIntoLightTwo"),
      ),
      messageText: Text(
        "You killed that giant monster in the city. Congratulations!",
        style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: "ShadowsIntoLightTwo"),
      ),
    )..show(context);

Solution 2: Avec la flushbar du package, vous pouvez également afficher une notification en haut
Lien Flushbar: https://github.com/AndreHaueisen/flushbar
Une autre suggestion pour utiliser flushbar Comment afficher le snack après navigator.pop ( contexte) dans Flutter?

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
...
Scaffold(
  key: _scaffoldKey,
...
onPressed: () {

                      _scaffoldKey.currentState.showSnackBar(
                          SnackBar(
                            content: Text('Purchase Successful'),
                            duration: Duration(seconds: 3),
                          ));
              }

3 commentaires

Flushbar ne fonctionne plus avec la dernière mise à jour Flutter.

@cwhisperer, veuillez utiliser github.com/AndreHaueisen/flushbar/issues/…

J'ai déjà essayé ceci: sur Android cela fonctionne mais pas sur IOS. Peut-être que j'ai fait quelque chose de mal.

0
votes

Vous pouvez renvoyer un booléen à partir de la méthode showDialog et l'utiliser pour déterminer s'il faut afficher le snackbar:

void main() {
  runApp(MaterialApp(
    home: AlertApp(),
  ));
}

class AlertApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MyShoppingButton(),
          ],
        ),
      ),
    );
  }
}

// Separate out the button from _AlertAppState so that the call to
// showSnackBar comes from a different BuildContext
class MyShoppingButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("Add to Shopping Cart [Simple]"),
      // Use an async onPressed method so that we can wait for the
      // result from the dialog before deciding whether to show the snackbar
      onPressed: () async {
        bool result = await showDialog<bool>(
          context: context,
          builder: (BuildContext context) {
            return MyShoppingDialog();
          },
        );
        // Check if result is null below as Flutter will throw Exception if
        // tries determining whether to enter an if branch will a null boolean
        if (result != null && result) {
          final snackBar = SnackBar(content: Text('Purchase Successful'));
          Scaffold.of(context).showSnackBar(snackBar);
        }
      },
    );
  }
}

class MyShoppingDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
      title: Text("Add To Shopping Cart"),
      children: <Widget>[
        SimpleDialogOption(
          child: Text("Yes"),
          onPressed: () {
            // Pop with a result of true so that MyShoppingButton
            // knows to show snackbar. In any other case
            // (including the user dismissing the dialog), MyShoppingButton
            // null receive null, and so will not show the snackbar
            Navigator.of(context).pop(true);
          },
        ),
        SimpleDialogOption(
          child: Text("Close"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ],
    );
  }
}

0 commentaires

0
votes

Vous devez créer un widget Scaffold dans showDialog et un widget Builder en tant qu'enfant de Scaffold et passer le contexte en paramètre.

 void sDialog({BuildContext context}){
     
    _simdalog = new SimpleDialog(
      title: new Text("Add To Shopping Cart"),
      children: <Widget>[
        new SimpleDialogOption(
          child: new Text("Yes"),
          onPressed: (){
            final snackBar = SnackBar(content: Text('Purchase Successful'));
            Scaffold.of(context).showSnackBar(snackBar);
          },
        ),
        new SimpleDialogOption(
          child: new Text("Close"),
          onPressed:() {Navigator.pop(context);},
        ),
      ],
    );
    showDialog(context: context, builder: (BuildContext context){
      return GestureDetector(
          onTap: (){Navigator.of(context).pop();},
          child: Scaffold(
            body: Builder(
                builder: (context){
                    return  _simdalog(context: context);
                }
            ),  
         ),);
    });
  }

0 commentaires