[解決済み] TextFormFieldでパスワードの表示/非表示を切り替えるには？

質問

現在、私のパスワードは TextFormField をこのように設定しています。

TextFormField(
  decoration: const InputDecoration(
      labelText: 'Password',
      icon: const Padding(
        padding: const EdgeInsets.only(top: 15.0),
        child: const Icon(Icons.lock),
      )),
  validator: (val) => val.length < 6 ? 'Password too short.' : null,
  onSaved: (val) => _password = val,
  obscureText: true,
);

パスワードの可視・非可視を切り替えるボタンのようなインタラクションが欲しいです。それを TextFormField ? それとも Stack ウィジェットを作成する必要があります。また、以下のような条件はどのように作られるのでしょうか？ obscureText に関する条件はどのように作られるのでしょうか？

どのように解決するのですか？

まず、ウィジェットを作成します。 StatefulWidget であれば StatelessWidget .

次に、変数 bool _obscureText という変数があり、それを TextFormField . でトグルします。 setState で切り替えます。

例

class _FormFieldSampleState extends State<FormFieldSample> {

  // Initially password is obscure
  bool _obscureText = true;

  String _password;

  // Toggles the password show status
  void _toggle() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample"),
      ),
      body: new Container(
        child: new Column(
          children: <Widget>[
            new TextFormField(
              decoration: const InputDecoration(
                  labelText: 'Password',
                  icon: const Padding(
                      padding: const EdgeInsets.only(top: 15.0),
                      child: const Icon(Icons.lock))),
              validator: (val) => val.length < 6 ? 'Password too short.' : null,
              onSaved: (val) => _password = val,
              obscureText: _obscureText,
            ),
            new FlatButton(
                onPressed: _toggle,
                child: new Text(_obscureText ? "Show" : "Hide"))
          ],
        ),
      ),
    );
  }
}

これが役に立つといいのですが