TextFormField obscureText in AlertDialog don't change

Issue

I want to change the obscureText mode of a TextFormField in an AlertDialog but it doesn’t work

Clicking the IconButton does not change
the obscureText to TextFormField in AlertDialog

I want to change the obscureText mode of a TextFormField in an AlertDialog but it doesn’t work

Clicking the IconButton does not change
the obscureText to TextFormField in AlertDialog

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final username = TextEditingController(text: '');
  final password = TextEditingController(text: '');
  final formKey = GlobalKey<FormState>();
  late bool obscure;

  @override
  void initState() {
    obscure = true;
    super.initState();
  }

  @override
  void dispose() {
    username.dispose();
    password.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            onPressed: () {
              showDialog(
                  context: context,
                  barrierDismissible: false,
                  builder: (_) {
                    return AlertDialog(
                      title: const Text('Connection'),
                      content: SizedBox(
                          height: 400,
                          width: 400,
                          child: Form(
                            key: formKey,
                            child: Column(
                              children: <Widget>[
                                TextFormField(
                                  cursorColor: Colors.grey,
                                  textInputAction: TextInputAction.next,
                                  maxLines: 1,
                                  controller: username,
                                  validator: (value) {
                                    return null;
                                  },
                                  decoration: const InputDecoration(
                                    isDense: true,
                                    prefixIcon: Icon(
                                      Icons.person_outlined,
                                    ),
                                    labelText: 'username',
                                  ),
                                ),
                                const SizedBox(
                                  height: 20.0,
                                ),
                                TextFormField(
                                  cursorColor: Colors.grey,
                                  controller: password,
                                  textInputAction: TextInputAction.next,
                                  decoration: InputDecoration(
                                    isDense: true,
                                    prefixIcon: const Icon(Icons.key),
                                    labelText: 'password',
                                    suffixIcon: IconButton(
                                        icon: const Icon(
                                            Icons.remove_red_eye_outlined),
                                        onPressed: () {
                                          // CHAGE OBSCURE
                                          setState(() {
                                            obscure = !obscure;
                                            if (kDebugMode) {
                                              print(obscure); // OK
                                            }
                                          });
                                        }),
                                  ),
                                  obscureText: obscure, // NOT OK
                                  obscuringCharacter: '*',
                                  validator: (String? value) {
                                    return null;
                                  },
                                ),
                              ],
                            ),
                          )),
                      actions: [
                        TextButton(
                          child: const Text('Send'),
                          onPressed: () {
                            if (formKey.currentState!.validate()) {
                              Navigator.of(context).pop();
                            }
                          },
                        ),
                      ],
                    );
                  });
            },
            icon: const Icon(Icons.person_outline_outlined),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
          ],
        ),
      ),
    );
  }
}

Solution

For that you have to use StatefulBuilder to use setState inside Dialog and update Widgets only inside of it.

Reason: setState is having different context inside the AlertDialog, so If you want to maintain the state of AlertDialog you must have to use StatefulBuilder. It will maintain another state for your AlertDialog

Full Working Code:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final username = TextEditingController(text: '');
  final password = TextEditingController(text: '');
  final formKey = GlobalKey<FormState>();
  late bool obscure;

  @override
  void initState() {
    obscure = true;
    super.initState();
  }

  @override
  void dispose() {
    username.dispose();
    password.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            onPressed: () {
              
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (_) {
          return StatefulBuilder(
              builder: (context, setState)
          {
            return AlertDialog(
              title: const Text('Connection'),
              content: SizedBox(
                  height: 400,
                  width: 400,
                  child: Form(
                    key: formKey,
                    child: Column(
                      children: <Widget>[
                        TextFormField(
                          cursorColor: Colors.grey,
                          textInputAction: TextInputAction.next,
                          maxLines: 1,
                          controller: username,
                          validator: (value) {
                            return null;
                          },
                          decoration: const InputDecoration(
                            isDense: true,
                            prefixIcon: Icon(
                              Icons.person_outlined,
                            ),
                            labelText: 'username',
                          ),
                        ),
                        const SizedBox(
                          height: 20.0,
                        ),
                        TextFormField(
                          cursorColor: Colors.grey,
                          controller: password,
                          textInputAction: TextInputAction.next,
                          decoration: InputDecoration(
                            isDense: true,
                            prefixIcon: const Icon(Icons.key),
                            labelText: 'password',
                            suffixIcon: IconButton(
                                icon: const Icon(Icons.remove_red_eye_outlined),
                                onPressed: () {
                                  // CHAGE OBSCURE
                                  setState(() {
                                    obscure = !obscure;
                                    if (kDebugMode) {
                                      print(obscure); // OK
                                    }
                                  });
                                }),
                          ),
                          obscureText: obscure,
                          // NOT OK
                          obscuringCharacter: '*',
                          validator: (String? value) {
                            return null;
                          },
                        ),
                      ],
                    ),
                  )),
              actions: [
                TextButton(
                  child: const Text('Send'),
                  onPressed: () {
                    if (formKey.currentState!.validate()) {
                      Navigator.of(context).pop();
                    }
                  },
                ),
              ],
            );
          });
        });

            },
            icon: const Icon(Icons.person_outline_outlined),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
          ],
        ),
      ),
    );
  }
}

Answered By – Pratik Butani

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.