setstate function is not working in flutter

Issue

    import 'package:flutter/material.dart';
    import 'package:flutter_application_1/pages/home_page.dart';
    import 'package:flutter_application_1/utils/routes.dart';
    
    class LoginPage extends StatefulWidget {
      const LoginPage({Key? key}) : super(key: key);
    
      @override
      State<LoginPage> createState() => _LoginPageState();
    }
    
    class _LoginPageState extends State<LoginPage> {
      @override
      Widget build(BuildContext context) {
        String x = '';
        return Material(
            // wrap column with singlechildscrollview widget
            child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                height: 28,
              ),
              Image.asset(
                "assets/images/login_image.png",
                fit: BoxFit.contain,
              ),
              SizedBox(
                height: 20.0,
              ),
              Text("Welcome $x",
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
              SizedBox(
                height: 20,
              ),
              // wrapping a column with Padding
              Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 16.0, horizontal: 32.0),
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                          hintText: "Enter Username", labelText: "Username"),
                      onChanged: (value) {
                        x = value;
                        setState(() {});
                      },
                    ),
                    TextFormField(
                      obscureText: true,
                      decoration: InputDecoration(
                          hintText: "Enter Password", labelText: "Password"),
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    ElevatedButton(
                      child: Text("Login"),
                      style: TextButton.styleFrom(minimumSize: Size(150, 40)),
                      onPressed: () {
                        print("hello");
                      },
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
      }
    }
    

I’m new to flutter and as I was learning about stateful widget. I’m facing this problem.setstate() is not working in flutter, the compiler is showing no error. Basically I want that when someone enter string in username textfield then the value should be appended along with "welcome".

Solution

You should put String x = ''; outside the Widget, see below:

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  String x = '';
  @override
  Widget build(BuildContext context) {
    ...

Answered By – My Car

Answer Checked By – David Marino (FlutterFixes Volunteer)