Wie zeige ich SnackBar in Flutter an? - flutter - Program QA

Wie zeige ich SnackBar in Flutter an?

2020-06-05 flutter widget snackbar

Ich möchte eine SnackBar in meiner Flutter-App anzeigen. Ich habe die Dokumente gelesen und kopiert:
Der Körper meines Gerüsts:

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("Osztályok"),
          leading: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: IconButton(
                  icon: Icon(Icons.exit_to_app, color: Colors.white70),
                  onPressed: () {
                    authService.signOut();
                    authService.loggedIn = false;
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => GoogleSignUp()));
                  })),
          actions: <Widget>[
            Padding(
                padding: const EdgeInsets.only(right: 5.0),
                child: Row(
                  children: <Widget>[
                    IconButton(
                        icon: Icon(Icons.add_circle_outline,
                            color: Colors.white70),
                        onPressed: () {
                          createPopup(context);
                        }),
//                    IconButton(
//                        icon: Icon(Icons.search, color: Colors.black38),
//                        onPressed: null),
                  ],
                )),
          ],
        ),

Die SnackBarPage-Klasse:

class SnackBarPage extends StatelessWidget {

  void jelszopress(TextEditingController jelszoController, BuildContext context) async{
    var jelszo;
    DocumentReference docRef =   
    Firestore.instance.collection('classrooms').document(globals.getid());
    await docRef.get().then((value) => jelszo= (value.data['Jelszo']) );
    if (jelszo == jelszoController.text.toString()){
      Navigator.push(context,
          MaterialPageRoute(builder: (context) => InClassRoom()));
    }
    else{
      Navigator.pop(context);


      final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

      Scaffold.of(context).showSnackBar(snackBar);
    }
  }
Future<String> jelszoba(BuildContext context) {
    TextEditingController jelszoController = TextEditingController();
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
              title: Text('Add meg a jelszót'),
              content: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  child: TextField(
                      controller: jelszoController,
                      decoration: InputDecoration(hintText: "Jelszó")
                  )
              ),
              actions: <Widget>[
                MaterialButton(
                  elevation: 5.0,
                  child: Text('Mehet'),
                  onPressed: () {
                    jelszopress(jelszoController, context);
                  },
                )]);
        }
    );
  }

  var nevek;
  var IDS;
  SnackBarPage(this.nevek, this.IDS);
  @override
  Widget build(BuildContext context){
    return ListView.builder(
      itemCount: nevek.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            onTap: () {
              globals.setid(IDS[index]);
              jelszoba(context);

            },
            title: Text(nevek[index]),
          ),
        );
      },
    ) ;

  }
}

Aber mein Cody zeigt die SnackBar nicht an. Ich habe versucht, diese Frage zu lösen : Wie wird eine Snackbar in Flutter richtig angezeigt? Das Hinzufügen eines Builder-Widgets hat jedoch nicht geholfen.

Answers

Aufgrund des Fehlers scheint der in Snackbar.of() Kontext nicht der richtige Kontext zu sein. Dies wäre sinnvoll, basierend auf 1 & 2 ; und Zusammenfassung unten kopiert:

Jedes Widget verfügt über einen eigenen BuildContext, der zum übergeordneten Element des Widgets wird, das von der Funktion StatelessWidget.build oder State.build zurückgegeben wird. (Und in ähnlicher Weise das Elternteil aller Kinder für RenderObjectWidgets.)

Dies bedeutet insbesondere, dass innerhalb einer Erstellungsmethode der Erstellungskontext des Widgets der Erstellungsmethode nicht mit dem Erstellungskontext der von dieser Erstellungsmethode zurückgegebenen Widgets identisch ist.

Dies bedeutet, dass der Build-Kontext, den Sie in der Funktion jelszoba(context) , nicht der Build-Kontext ist, den Sie benötigen, und tatsächlich der Build-Kontext des Widgets ist, das das Scaffold instanziiert.

So beheben Sie: Um dies zu beheben, wickeln Sie Ihr Karten-Widget in Ihre SnackbarPage in ein Builder-Widget und übergeben Sie den Kontext von diesem an die jelszoba(context) Methode jelszoba(context) .

Ein Beispiel aus 1 poste ich unten:

@override
Widget build(BuildContext context) {
// here, Scaffold.of(context) returns null
return Scaffold(
  appBar: AppBar(title: Text('Demo')),
  body: Builder(
    builder: (BuildContext context) {
      return FlatButton(
        child: Text('BUTTON'),
        onPressed: () {
          // here, Scaffold.of(context) returns the locally created Scaffold
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Hello.')
          ));
        }
      );
    }
  )
);
}

Normalerweise können Sie auf diese Weise die Snackbar in der unteren Navigationsleiste verwenden. Wenn Sie es jedoch im Hauptteil anzeigen möchten, kopieren Sie einfach den Code aus Builder und fügen Sie ihn in den Hauptteil des Gerüsts ein.

      Scaffold(bottomNavigationBar: Builder(builder: (context) => Container(child: Row(children: <Widget>[
      Icon(Icons.add_alarm), Icon(Icons.map),    IconButton(icon: Icon(Icons.bookmark),
            onPressed:() {
        Scaffold.of(context).showSnackBar(mySnackBar);
            
              final mySnackBar =  SnackBar(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
              behavior: SnackBarBehavior.floating,
              backgroundColor: Colors.white, duration: Duration(seconds: 1),
              content: Text(
                'Article has been removed from bookmarks',
                
              ),);
        } 
),
    ],
),
),
),
);

Hinweis: In der Verhaltenseigenschaft von SnackBar können Sie sie einfach leer lassen. Das Problem dabei ist jedoch: "Wenn Sie eine gekrümmte Navigationsleiste oder eine schwebende Aktionsschaltfläche über der unteren Navigationsleiste haben, hebt die Snackleiste diese Symbole (oder FAB) an und wirkt sich auf die Benutzeroberfläche aus." Aus diesem Grund wird SnackBar.floating bevorzugt, da es mit der Benutzeroberfläche besser kompatibel ist. Aber Sie können selbst prüfen, was am besten zu Ihnen passt.

Related