如何在flutter中为具有模糊文本属性的TextField小部件添加显示/添加密码图标

Question

我的项目中有各种用于密码的文本字段小部件，并且所有这些小部件都具有模糊文本属性，我如何添加一个图标，允许在单击文本字段时显示和隐藏文本？

Answer 1

import 'package:flutter/material.dart';
class MainClass extends StatefulWidget {
const MainClass({Key key}) : super(key: key);
@override
_MainClassState createState() => _MainClassState();
}
class _MainClassState extends State<MainClass> {
bool _isObscure = false;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Sample"),
),
body: new Container(
child: new Column(
children: <Widget>[
TextField(
obscureText: _isObscure,
decoration: InputDecoration(
labelText: 'Password',
// this button is used to toggle the password visibility
suffixIcon: IconButton(
icon: Icon(_isObscure ? Icons.visibility : Icons.visibility_off),
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
}
)
),
),
],
),
),
);
}
}

Answer 2

您可以在TextField:中添加装饰

TextField(
//    ...,
decoration: InputDecoration(
prefixIcon:Icon(Icons.password),
),
),

Answer 3

在inputDecoration中添加后缀，并在单击后缀小部件时更改状态。

decoration:InputDecoration(
hintText: 'First name',
icon: Icon(Icons.add),
suffix: GestureDetector(child: Icon(Icons.remove), onTap: () {},),
),