Как отобразить диалоговое окно после успешных данных

#flutter #showdialog

#flutter #showdialog

Вопрос:

Я хочу показать диалоговое окно «добавить успех!» после add/ update data в моем приложении. Я пытался использовать показать диалоговое окно, но это не сработало. Итак, мне нужна ваша помощь

добавить класс супервизора :

 import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:finalyearproject/model/NewUser.dart';
import 'package:finalyearproject/service/database.dart';




class AddSupervisor extends StatefulWidget {


  @override
  _AddSupervisorState createState() => _AddSupervisorState();
}

class _AddSupervisorState extends State<AddSupervisor> {

  //text field
  String name = ' ';
  String email = ' ';
  String uniqueID = ' ';
  String phone = ' ';
  String error;
  String id = Firestore.instance.collection('Supervisor').document().documentID;
  final GlobalKey<FormState> _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Supervisor'),
            backgroundColor: Colors.redAccent,
          ),
          body: Form(
            key: _formKey,
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  SizedBox(height: 25.0),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: 'Name',
                        prefixIcon: Icon(Icons.person),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5))),
                    keyboardType: TextInputType.text,
                    validator: (value) => value.isEmpty ? 'Name cannot be empty!': null,
                    onChanged: (value) {
                      setState(() => name = value);
                    },
                  ),
                  SizedBox(height: 10.0),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: 'Email',
                        prefixIcon: Icon(Icons.email),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5))),
                    keyboardType: TextInputType.emailAddress,
                    validator: (value) => value.isEmpty ? 'Email cannot be empty!': null,
                    onChanged: (value) {
                      setState(() => email = value);
                    },
                  ),
                  SizedBox(height: 10.0),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: 'Number Phone',
                        prefixIcon: Icon(Icons.phone),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5))),
                    keyboardType: TextInputType.number,
                    validator: (value) => value.isEmpty ? 'Number Phone cannot be empty!': null,
                    onChanged: (value) {
                      setState(() => phone = value);
                    },
                  ),
                  SizedBox(height: 10.0),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: 'Unique ID ',
                        prefixIcon: Icon(Icons.perm_contact_calendar),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5))),
                    keyboardType: TextInputType.number,
                    validator: (value) => value.isEmpty ? 'Ic number cannot be empty!': null,
                    onChanged: (value) {
                          setState(() => uniqueID = value);
                    },
                  ),
                  const SizedBox(height: 20.0),
                  RaisedButton(
                      color: Colors.redAccent,
                      textColor: Colors.black,
                      child: Text("Save"),
                      onPressed: () async {
                        if(_formKey.currentState.validate()){
                          DatabaseService().addSupervisor(NewUser(name: name, email: email, uniqueID: uniqueID, nophone: phone, id: id));
                          Navigator.pop(context); 
                          _formKey.currentState.save();
                        } else {
                          print("Must be complete all!");
                        }
                      }
                  ),
                ],
              ),
            ),
          ),
        );
    }
}
  

Я хочу поместить диалоговое окно показа во всплывающее окно линейного навигатора, но я все еще не могу понять, как поместить туда диалоговое окно показа. Есть ли у кого-нибудь идеи? Действительно нужна ваша помощь.

Ответ №1:

 Future<bool> alertDialog( BuildContext context) {
  return showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Done'),
          content: Text('Add Success'),
          actions: <Widget>[
            FlatButton(
              child: Text('Ok'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        );
      });
}
  

и всякий раз, когда вы хотите его вызвать, используйте следующий код:

  await alertDialog(
    context,
    );
  

Или, что еще лучше, вы можете использовать пакет FLutterToast

 import 'package:fluttertoast/fluttertoast.dart';
Future<bool> toast(String message) {
  Fluttertoast.cancel();
  return Fluttertoast.showToast(
      msg: message,
      toastLength: Toast.LENGTH_LONG,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIos: 4,
      backgroundColor: Colors.redAccent,
      textColor: Colors.white,
      fontSize: 15.0);
}
  

и всякий раз, когда вы хотите отобразить всплывающее окно для успешного подключения, вызывайте функцию

 toast("Success Data");
  

обратите внимание, что

 Fluttertoast.cancel();
  

Используется для устранения всех оставшихся тостов перед тем, который вы пытаетесь вызвать.