如何在flutter中隐藏/显示密码

Question

作为flutter的初学者，我在flutter中制作了第一个登录表单，但唯一的问题是我不知道如何在flutter隐藏/显示密码。我在互联网上复制了隐藏/显示的密码代码，但我多次出错。我不知道执行代码的正确方法是什么。请帮助我，下面是我的代码。

import 'package:flutter/material.dart';
class LogInForm extends StatelessWidget {
const LogInForm({Key? key}) : super(key: key);


@override

Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text(
"Welcome",
style: TextStyle(
fontSize: 50, fontWeight: FontWeight.bold),
),
SizedBox(
height: 30,
),
Text(
"Login to your account",
style: TextStyle(fontSize: 25, color: Colors.grey[700]),
)
],
),

Container(
margin: EdgeInsets.fromLTRB(200, 100, 200, 0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
labelText: 'Username',
labelStyle: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
)),
)),
Container(
margin: EdgeInsets.fromLTRB(200, 1, 200, 10),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
labelText: 'Password',
labelStyle: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
)),
)),


MaterialButton(
minWidth: double.tryParse('500'),
height: 50,
onPressed: () {},
color: Color.fromARGB(255, 6, 122, 204),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Text(
"Login",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18,
color: Colors.white,
),
),
),
]),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Don't have an account?"),
Text(
" Register",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18,
),
)
],
),
],
),
));
}
}

Answer 1

您可以像这样在TextField中使用obscureText。

bool _passVisibility = true;
TextEditingController passwordCon = TextEditingController();

Widget _passwordWidget() {
return TextField(
key: Key('password-input'),
textInputAction: TextInputAction.done,
keyboardType: TextInputType.visiblePassword,
controller: passwordCon,
autofocus: false,
obscureText: _passVisibility,
decoration: InputDecoration(
labelText: //your labelText
hintText: //your hintText
border: OutlineInputBorder(
borderRadius:
BorderRadius.circular(10.0),
borderSide: BorderSide(
color: Colors.amber,
),
),
suffixIcon: IconButton(
icon: _passVisibility
? Icon(Icons.visibility_off)
: Icon(Icons.visibility),
onPressed: () {
_passVisibility = !_passVisibility;
setState(() {});
},
)),
);
}

Answer 2

只需在TextForm字段中制作obscureText : True即可。谢谢。