CODEWITHSUNDEEP
firebaseflutterfirebase-authentication
HAHAHAHA
HAHAHAHA

Reputation: 29

Logout Alert Dialog (confirmation message) in Flutter with Firebase

How can I show the confirmation message to ask the user if they want to logout in to the flutter? When the user clicks "Yes", the page will navigate to the login page and the user status will be not logged in. When the user clicks "No", they will stay on the home page. The button should be a rounded button with text in the middle of the home page.

import 'package:flutter/material.dart';
import 'package:login/Screen/Login/components/FormScreen.dart';
import 'package:login/Screen/Login/components/body.dart';
import 'package:login/Screen/Login/components/camera.dart';
import 'package:login/Screen/Login/components/uploadpage.dart';
import 'package:login/auth.dart';
import 'package:login/root_page.dart';

class MyHomePage extends StatelessWidget {
  MyHomePage({this.auth, this.onSignOut});
  final  auth;
  final VoidCallback onSignOut;

  Icon cusIcon = Icon(Icons.search);
  Widget cusSearchBar = Text("Home Page");
  // show the dialog
  void _signOut() async {
    try {
      await auth.signOut();
      onSignOut();
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            // search icon
            actions: <Widget>[
              IconButton(
                onPressed: () {
                  if (this.cusIcon.icon == Icons.search) {
                    this.cusIcon = Icon(Icons.cancel_outlined);
                    this.cusSearchBar = TextField(
                      textInputAction: TextInputAction.go,
                      decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: "Search Car Plate"),
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    );
                  } else {
                    this.cusIcon = Icon(Icons.search);
                    this.cusSearchBar = Text("Home Page");
                  }
                },
                icon: cusIcon,
              )
            ]),
        // Add Icon
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
              RaisedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => FormScreen()),
                  );
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                label: Text(
                  'Add Vehicle',
                  style: TextStyle(color: Colors.white),
                ),
                icon: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
                textColor: Colors.white,
                splashColor: Colors.red,
                color: Colors.purple,
              ),
              RaisedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => LandingScreen()),
                  );
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                label: Text(
                  'Camera',
                  style: TextStyle(color: Colors.white),
                ),
                icon: Icon(
                  Icons.camera_alt,
                  color: Colors.white,
                ),
                textColor: Colors.white,
                splashColor: Colors.red,
                color: Colors.purple,
              ),
              RaisedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => UploadPage()),
                  );
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(30.0))),
                label: Text(
                  'Upload CSV File',
                  style: TextStyle(color: Colors.white),
                ),
                icon: Icon(
                  Icons.upload_file,
                  color: Colors.white,
                ),
                textColor: Colors.white,
                color: Colors.purple,
              ),
              FlatButton(
                  onPressed: _signOut,
                  child: new Text('Logout',
                      style:
                          new TextStyle(fontSize: 17.0, color: Colors.white)))
            ])));
  }
}

Upvotes: 2

Views: 4329

Answers (2)

ammar
ammar

Reputation: 131

use showDialog

your code should look something like this:

import 'package:flutter/material.dart';
import 'package:login/Screen/Login/components/FormScreen.dart';
import 'package:login/Screen/Login/components/body.dart';
import 'package:login/Screen/Login/components/camera.dart';
import 'package:login/Screen/Login/components/uploadpage.dart';
import 'package:login/auth.dart';
import 'package:login/root_page.dart';

class MyHomePage extends StatelessWidget {
  MyHomePage({this.auth, this.onSignOut});
  final  auth;
  final VoidCallback onSignOut;

  Icon cusIcon = Icon(Icons.search);
  Widget cusSearchBar = Text("Home Page");
  // show the dialog
Future _signOut() async {
  try {
    //await auth.signOut();
    onSignOut();
    return await auth.signOut();
  } catch (e) {
    print(e);
  }
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            // search icon
            actions: <Widget>[
              IconButton(
                onPressed: () {
                  if (this.cusIcon.icon == Icons.search) {
                    this.cusIcon = Icon(Icons.cancel_outlined);
                    this.cusSearchBar = TextField(
                      textInputAction: TextInputAction.go,
                      decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: "Search Car Plate"),
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      ),
                    );
                  } else {
                    this.cusIcon = Icon(Icons.search);
                    this.cusSearchBar = Text("Home Page");
                  }
                },
                icon: cusIcon,
              )
            ]),
        // Add Icon
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
              RaisedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => FormScreen()),
                  );
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                label: Text(
                  'Add Vehicle',
                  style: TextStyle(color: Colors.white),
                ),
                icon: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
                textColor: Colors.white,
                splashColor: Colors.red,
                color: Colors.purple,
              ),
              RaisedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => LandingScreen()),
                  );
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                label: Text(
                  'Camera',
                  style: TextStyle(color: Colors.white),
                ),
                icon: Icon(
                  Icons.camera_alt,
                  color: Colors.white,
                ),
                textColor: Colors.white,
                splashColor: Colors.red,
                color: Colors.purple,
              ),
              RaisedButton.icon(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => UploadPage()),
                  );
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(30.0))),
                label: Text(
                  'Upload CSV File',
                  style: TextStyle(color: Colors.white),
                ),
                icon: Icon(
                  Icons.upload_file,
                  color: Colors.white,
                ),
                textColor: Colors.white,
                color: Colors.purple,
              ),
              FlatButton(
                  onPressed: () {
              showDialog(
                  builder: (ctxt) {
                    return AlertDialog(
                        title: Text("Logout"),
                        content: Column(
                          children: [
                            Text("Do you Really want to logout?"),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                RaisedButton(
                                  child: Text("Cancel"),
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },
                                ),
                                RaisedButton(
                                  child: Text("Logout"),
                                  onPressed: () {
                                    _signOut().whenComplete(() =>
                                        Navigator.pushReplacement(
                                            context, yourLoginPage()));
                                  },
                                )
                              ],
                            ),
                          ],
                        ));
                  },
                  context: context);
            },
                  child: new Text('Logout',
                      style:
                          new TextStyle(fontSize: 17.0, color: Colors.white)))
            ])));
  }
}

Upvotes: 2

Luis Utrera
Luis Utrera

Reputation: 1067

showDialog method should be enough for this case.

FlatButton(
  onPressed: () => showDialog(
    context: context,
    builder: (_) => Dialog(
      child: Container() //Your buttons here
      ,
    ),
  ),
  child: new Text(
    'Logout',
    style: new TextStyle(
      fontSize: 17.0,
      color: Colors.white,
    ),
  ),
);

Upvotes: 1

Related Questions