Flutter/Dart: Button onPressed() called but screen not redrawing?

Question

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
      ],
    ),
  ),
);
}
}

Answer 1

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.