Home > Net >  Flutter button won't change text when clicked
Flutter button won't change text when clicked

Time:10-03

So, strangely...

I have two screens. A Register screen and a Login screen. The Login screen maintains the same logic as the Register screen for the button feature. Meaning, when I click the login screen button for Login, the button gets disabled (from being clicked more than once) and its text changes to Logging In...

Is there something I am missing in my logic for the Register screen? Below is the module for the Register screen:

class RegisterEmailScreen extends StatefulWidget {
  @override
  _RegisterEmailScreenState createState() => _RegisterEmailScreenState();
}

class _RegisterEmailScreenState extends State<RegisterEmailScreen> {
  bool _signUpButtonClicked = false;
  String _signUpButtonMessage = 'Register';

  // Some form code
  child: OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          backgroundColor: Colors.green,
                          minimumSize: Size(double.infinity, 45.h),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20.0)),
                        ),
                        child: Text(
                          _signUpButtonMessage,
                          style:
                              TextStyle(color: Colors.white, fontSize: 18.ssp),
                        ),
                        onPressed: _signUpButtonClicked
                            ? null
                            : () async {
                                if (!_formKey.currentState.validate()) {
                                  return;
                                }
                                setState(() => {
                                      _signUpButtonMessage: 'Registering...',
                                      _signUpButtonClicked: true,
                                    });
                                var name = _nameController.text;
                                var username = _usernameController.text;
                                var password = _passwordController.text;
                                var email = _emailController.text;
                                print('Registering with: '   username);

                                var signUpReponse = await attemptRegistration(
                                    nome,
                                    username,
                                    password,
                                    email);
                                setState(() => {
                                      _signUpButtonClicked: false,
                                      _signUpButtonMessage: 'Register',
                                    });
                                // Some more code

CodePudding user response:

I think you mistakenly return values in the setState method using arrow function. You should set the values like below

onPressed: _signUpButtonClicked
                            ? null
                            : () async {
                                if (!_formKey.currentState.validate()) {
                                  return;
                                }
                                setState(() {
                                      _signUpButtonMessage= 'Registering...';
                                      _signUpButtonClicked= true;
                                    });
                                var name = _nameController.text;
                                var username = _usernameController.text;
                                var password = _passwordController.text;
                                var email = _emailController.text;
                                print('Registering with: '   username);

                                var signUpReponse = await attemptRegistration(
                                    nome,
                                    username,
                                    password,
                                    email);
                                setState(() {
                                      _signUpButtonClicked= false;
                                      _signUpButtonMessage='Register';
                                    });
                                // Some more code

CodePudding user response:

Answering my own question: It was a simple syntax mistake. Notice that the posting question has _signUpButtonClicked : false (and other variables in setState(). It was supposed to be an = operator for all.

The code below simply changes all 4 instances of the mistake above:

class RegisterEmailScreen extends StatefulWidget {
  @override
  _RegisterEmailScreenState createState() => _RegisterEmailScreenState();
}

class _RegisterEmailScreenState extends State<RegisterEmailScreen> {
  bool _signUpButtonClicked = false;
  String _signUpButtonMessage = 'Register';

  // Some form code
  child: OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          backgroundColor: Colors.green,
                          minimumSize: Size(double.infinity, 45.h),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20.0)),
                        ),
                        child: Text(
                          _signUpButtonMessage,
                          style:
                              TextStyle(color: Colors.white, fontSize: 18.ssp),
                        ),
                        onPressed: _signUpButtonClicked
                            ? null
                            : () async {
                                if (!_formKey.currentState.validate()) {
                                  return;
                                }
                                setState(() => {
                                      _signUpButtonMessage = 'Registering...',
                                      _signUpButtonClicked = true,
                                    });
                                var name = _nameController.text;
                                var username = _usernameController.text;
                                var password = _passwordController.text;
                                var email = _emailController.text;
                                print('Registering with: '   username);

                                var signUpReponse = await attemptRegistration(
                                    nome,
                                    username,
                                    password,
                                    email);
                                setState(() => {
                                      _signUpButtonClicked = false,
                                      _signUpButtonMessage = 'Register',
                                    });
                                // Some more code
  • Related