Flutter with Firebase中的注销警报对话框(确认消息)

Question

如何显示确认消息以询问用户是否要注销到flutter？当用户点击"；是"；，页面将导航到登录页面并且用户状态将不被登录；否"；，他们将留在主页上。按钮应该是一个圆形按钮，文本位于主页中间。

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

Answer 1

showDialog方法对于这种情况应该足够了。

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,
),
),
);

Answer 2

使用showDialog

你的代码应该是这样的：

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