Cfrgtkky

I am trying to have a button change its text when it is pressed. I have done so by using setState() to change the value of the string that is passed to the Text child of the button. The button I am trying to change the text of is forgotLabel - found in the code below.

I have tried using different button types such as FlatButton and RaisedButton and all of them resulted in the same issue: The button gets pressed, setState gets called and changes the value of the string that represents the text in the button (called forgotText in the code) but the button does not appear to visually change. Here is the code:

import 'package:flutter/material.dart';

import 'package:mobileapp/home_page.dart';



class LoginPage extends StatefulWidget {

  static String tag = 'login-page';

  @override

  _LoginPageState createState() => _LoginPageState();

}



class _LoginPageState extends State<LoginPage> {

  @override

  Widget build(BuildContext context) {

final bgGrey = Color(0xFF1c232c);



//Company logo at top

final logo = Hero(

  tag: 'hero',

  child: CircleAvatar(

    backgroundColor: Colors.transparent,

    radius:68.0,

    child: Image.asset('assets/logo_transparent.png'),

  ),

);



//Email field

final email = TextFormField(

  keyboardType: TextInputType.emailAddress,

  autofocus: false,

  initialValue: 'jonDoe@domain.com',  //remove later

  style: TextStyle(color: Colors.white70),

  decoration: InputDecoration(

    hintText: 'Email',

    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),

    enabledBorder: OutlineInputBorder(

      borderRadius: BorderRadius.circular(32.0),

      borderSide: BorderSide(color: Colors.white)

      )

  ),

);



//Password field

final password = TextFormField(

  autofocus: false,

  initialValue: 'verysafePassword',   //remove later

  obscureText: true,

  style: TextStyle(color: Colors.white70),

  decoration: InputDecoration(

    hintText: 'Password',

    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),

    enabledBorder: OutlineInputBorder(

      borderRadius: BorderRadius.circular(32.0),

      borderSide: BorderSide(color: Colors.white)

      )

  ),

);



// Login button

final loginButton = Padding(

  padding: EdgeInsets.symmetric(vertical: 20.0),

  child: Material(

    borderRadius: BorderRadius.circular(30.0),

    color: Colors.deepOrangeAccent,

    shadowColor: Colors.deepOrange[300],

    elevation: 5.0,

    child: MaterialButton(

      minWidth: 200.0,

      height: 30.0,

      onPressed: () {

        Navigator.push(

          context,

          MaterialPageRoute(builder: (context) => HomePage()),

        );

      },

      child: Text('Login', style: TextStyle(color: Colors.white70),),

    ),

  )

);



String forgotText = "Forgot Password";

void changeText() {

   setState(() =>forgotText = "Please use the web app to reset your password.");

}



// Forgot password button

final forgotLabel = MaterialButton(

  child: Text(

    forgotText,

    style: TextStyle(color: Colors.white70),

  ),

  onPressed: changeText,

);



//Layout settings for each widget made 

//Contains: logo, email, password, loginButton and forgotLabel

return Scaffold(

  backgroundColor: bgGrey,    //defined under method declaration

  body: Center(

    child: ListView(

      shrinkWrap: true,

      padding: EdgeInsets.only(left: 24.0, right: 24.0),

      children: <Widget>[

        logo,

        SizedBox(height: 48.0),

        email,

        SizedBox(height: 8.0),

        password,

        SizedBox(height: 25.0),

        loginButton,

        forgotLabel

      ],

    ),

  ),

);

}

}

The problem is forgotText was changed when calling setState but because it's defined as a local variable inside build(), it gets initialised to Forgot Password again. Make it an instance variable of _LoginPageState.