如何在颤动应用程序中隐藏单击按钮？
Posted
技术标签:
【中文标题】如何在颤动应用程序中隐藏单击按钮？【英文标题】：How to hide a button on click in a flutter application? 【发布时间】：2020-07-13 15:46:47 【问题描述】：normal image
image after entering the mobile number
在此图中，当用户单击登录按钮时，登录按钮应该会消失，并且会出现一个文本字段，然后是一个提交按钮。
我在点击登录按钮时出现了文本字段，但是我不知道一旦按下该登录按钮后如何消失。
import 'dart:async';
import 'dart:ffi';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../widgets/landing_page.dart';
import '../screens/register.dart';
import 'package:google_sign_in/google_sign_in.dart';
import '../widgets/google_sign_in_btn.dart';
import '../widgets/reactive_refresh_indicator.dart';
// Each item on AuthStatus represents quite literally the status of the UI.
// On SOCIAL_AUTH only the GoogleSignInButton will be visible.
enum AuthStatus SOCIAL_AUTH
class AuthScreen extends StatefulWidget
@override
_AuthScreenState createState() => _AuthScreenState();
// On _AuthScreenState we start by defining the tag that will be used for our logger, then the default status as SOCIAL_AUTH, which means we need to do Google's sign in and the GoogleSignInButton will be visible and interactive.
class _AuthScreenState extends State<AuthScreen>
String phoneNo;
String smsCode;
String verificationId;
bool _smsCodeDisabled = true;
bool isThere;
bool isPresent;
bool _canShowButton = false;
final db = Firestore.instance;
Firestore.instance.collection('transcriber_user_registeration').where('mobileno', isEqualTo: phoneNo)
// .snapshots().listen(
// (data) print("Inside phone number check : $data"); );
// // return phoneNumberCheck(phoneNo);
// QuerySnapshot result =
// await Firestore.instance.collection('transcriber_user_registeration').getDocuments();
// var list = result.documents;
// print("Before data loop");
// list.forEach((data) => print(data));
// print("After data loop");
Future<void> phoneNumberCheck(String phoneNo) async
print("Start of the function");
//bool registerState = false;
//bool isPresent = false;
Firestore.instance
.collection("transcriber_user_registeration")
.getDocuments()
.then((QuerySnapshot snapshot)
snapshot.documents.forEach((f) async
if (isPresent = ('$f.data['mobileno']' == phoneNo))
print(isPresent);
final PhoneCodeAutoRetrievalTimeout autoRetrieve = (String verId)
this.verificationId = verId;
;
final PhoneCodeSent smsCodeSent =
(String verId, [int forceCodeResend])
this.verificationId = verId;
print("im in sms code dialog");
// smsCodeDialog(context).then((value)
// print('Signed in');
// );
setState(()
this._smsCodeDisabled = false;
);
;
final PhoneVerificationCompleted verifySuccess =
(AuthCredential user)
print("verified");
;
final PhoneVerificationFailed verifyFailed =
(AuthException exception)
print('$exception.message');
;
await FirebaseAuth.instance.verifyPhoneNumber(
phoneNumber: this.phoneNo,
codeAutoRetrievalTimeout: autoRetrieve,
codeSent: smsCodeSent,
timeout: const Duration(seconds: 5),
verificationCompleted: verifySuccess,
verificationFailed: verifyFailed,
);
// else
// _showMessage();
//
);
);
//print("End of the function $isPresent");
Future<void> verifyPhone() async
// final PhoneCodeAutoRetrievalTimeout autoRetrieve = (String verId)
// this.verificationId = verId;
// ;
var tmp1 = phoneNo.toString();
print('ref stsmt starts $tmp1');
await phoneNumberCheck(phoneNo);
print("After execution of the function $isPresent");
print('bvnnn');
Future<bool> smsCodeDialog(BuildContext context)
return showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context)
return new AlertDialog(
title: Text('Enter sms code'),
content: TextField(onChanged: (value)
this.smsCode = value;
),
contentPadding: EdgeInsets.all(10.0),
actions: <Widget>[
new FlatButton(
child: Text('Login'),
onPressed: () async
//await signIn();
await FirebaseAuth.instance.currentUser().then((user)
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => LandingPageApp()));
);
)
],
);
);
signIn()
print("came to sign in page");
final AuthCredential credential = PhoneAuthProvider.getCredential(
verificationId: verificationId,
smsCode: smsCode,
);
FirebaseAuth.instance.signInWithCredential(credential).then((user)
Navigator.push(
context, MaterialPageRoute(builder: (context) => LandingPageApp()));
).catchError((e)
print(e);
);
void hideWidget()
setState(()
_canShowButton != _canShowButton;
);
@override
Widget build(BuildContext context)
return Scaffold(
backgroundColor: Colors.white,
body: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Flexible(
flex: 1,
child: new Container(
//color: Colors.white,
height: 200.0,
width: 400.0,
decoration: new BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/images/download.png'),
),
),
),
),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 20.0),
child: TextFormField(
decoration:
InputDecoration(hintText: 'Enter your Phone number'),
keyboardType: TextInputType.phone,
onChanged: (value)
this.phoneNo = "+91$value";
,
validator: validateMobile),
),
SizedBox(height: 10.0),
Visibility(
visible: _canShowButton,
child: RaisedButton(
child: Text('Login'),
textColor: Colors.white,
elevation: 7.0,
color: Colors.blue,
onPressed: () async
bool _canShowButton = true;
await verifyPhone();
setState(()
_canShowButton = !_canShowButton;
);
hideWidget();
//_number();
,
),
),
_smsCodeDisabled
? SizedBox(height: 10.0)
: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(
horizontal: 20.0, vertical: 16.0),
child: TextFormField(
decoration:
InputDecoration(hintText: 'Enter OTP'),
keyboardType: TextInputType.number,
onChanged: (value)
this.smsCode = value;
,
validator: validateOtp),
),
SizedBox(height: 10.0),
RaisedButton(
onPressed: () async
await signIn();
FirebaseAuth.instance.currentUser().then((user)
print(["user", user]);
if (user != null)
print(user.uid);
// Navigator.of(context).pop();
//// Navigator.of(context).pushReplacementNamed('/homePage');
// Navigator.of(context).push(
// MaterialPageRoute<Null>(
// builder: (BuildContext context)
// return new LandingPageApp();
// ));
else
print("user is null");
Navigator.of(context).pop();
signIn();
);
,
child: Text('Submit'),
textColor: Colors.white,
elevation: 7.0,
color: Colors.blue,
),
],
),
SizedBox(
height: 20.0,
),
Column(
children: <Widget>[
Row(children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(
vertical: 16.0, horizontal: 20.0),
child: Text(
'Not a Registered User?',
style: TextStyle(
fontSize: 16,
),
),
),
MaterialButton(
child: Text(
'Register',
style: TextStyle(
color: Colors.black,
),
),
//color: Colors.blue,
onPressed: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Register()));
,
),
]),
],
),
],
),
));
String validateMobile(String value)
//Indian Mobile numbers are of 10 digits only.
if (value.length != 10)
return 'Mobile number must be of 10 digits';
else
return null;
String validateOtp(String value)
//Otp needs to be of 6 digits
if (value.length != 6)
return 'OTP must be of 6 digits';
else
return null;
【问题讨论】：
请贴出你写的代码。单击登录按钮后如何显示其他字段，您可以做相反的事情来隐藏按钮和字段。 我已经添加了代码。 【参考方案1】：在您的构建方法中，您已经有一个布尔值_smsCodeDisabled 来识别是否需要显示 otp 字段。您可以使用相同的布尔值来隐藏登录字段和按钮。逻辑应该是这样的：
@override
Widget build(BuildContext context)
return _smsCodeDisabled ? _getLoginWidget() : _getOtpWidget();
Widget _getLoginWidget()
// Return Login field and button
Widget _getOtpWidget()
// Return otp field and button
或者如果只需要隐藏登录按钮，使用如下逻辑：
@override
Widget build(BuildContext context)
return Scaffold(
// other code
// Login button logic
_smsCodeDisabled ? RaisedButton(...) : Container();
);
【讨论】：
是的，我只需要隐藏登录按钮，但是我没有得到这个 sn-p 代码。放在哪里，什么是 //properties？你能解释一下我的代码吗？ @PranavArora : //properties 我的意思是，您为凸起按钮编写的代码，例如子级、颜色、高度等。在现有代码中，您要添加凸起按钮检查是否 _smeCodeDisabled，如果为真，则以与您现在相同的方式创建凸起按钮，否则返回一个空白容器（）；【参考方案2】：请试试这个
bool _canShowButton = true;
void hideWidget()
setState(()
_canShowButton = !_canShowButton;
);
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('Test Screen'),
),
body: Container(
padding: const EdgeInsets.all(8),
child: Column(
children: <Widget>[
Flexible(
flex: 1,
child: Container(
//color: Colors.white,
height: 200.0,
width: 400.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('https://picsum.photos/250?image=10'),
),
),
),
),
SizedBox(height: 20.0),
///if the show button is false
!_canShowButton
? const SizedBox.shrink()
: RaisedButton(
child: Text('Login'),
textColor: Colors.white,
elevation: 7.0,
color: Colors.blue,
onPressed: ()
hideWidget();
//_number();
,
),
],
)),
);
【讨论】：
请注意，我更改了您的hideWidget 功能。从_canShowButton != _canShowButton; 到_canShowButton = !_canShowButton;
谢谢它的工作！但是，每次我重新运行应用程序时都会出现一个问题，登录按钮没有显示，然后单击它以隐藏它并显示 otp 字段
只需将_canShowButton的初始值设置为true即可。或将其设置在您的initState()
我又问了一个与 Cloud Firestore 相关的问题，你能帮我解决这个问题吗？以上是关于如何在颤动应用程序中隐藏单击按钮？的主要内容，如果未能解决你的问题，请参考以下文章