flutter – change a variable from another class

Issue

I would like when I press on the RawMaterialButton, the textField () class changes to the container () class and appears on the screen,
with the code I have now when I press nothing happens …

can anyone fix it? Thank you.

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: chat(),
    );
  }
}

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

  @override
  _chatState createState() => _chatState();
}

class _chatState extends State<chat> {
  bool changeClass = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: changeClass ? container() : textField(changeClass: changeClass),
    );
  }
}

class textField extends StatefulWidget {
  textField({Key? key, required this.changeClass}) : super(key: key);

  bool changeClass = false;

  @override
  _textFieldState createState() => _textFieldState();
}

class _textFieldState extends State<textField> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.red,
          ),
          RawMaterialButton(
            onPressed: () {
              setState(() {
                widget.changeClass = true;
              });
            },
            child: Icon(Icons.send),
          )
        ],
      ),
    );
  }
}

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

  @override
  _containerState createState() => _containerState();
}

class _containerState extends State<container> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: 60.0,
        color: Colors.grey,
      ),
    );
  }
}

hope someone can help me.
Thank you 🙂
I write this piece because otherwise it won’t let me upload itI write this piece because otherwise it won’t let me upload itI write this piece because otherwise it won’t let me upload it

Solution

You are technically changing a local variable in the _textFieldState, so to solve the problem you have multiple options, one of them is to pass a function that change the state in the _chatState, this code would do so:

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: chat(),
    );
  }
}

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

  @override
  _chatState createState() => _chatState();
}

class _chatState extends State<chat> {
  bool changeClass = false;
  changeClassValue() {
    setState(() {
      changeClass = !changeClass;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: changeClass
          ? container()
          : textField(changeClassValue: changeClassValue),
    );
  }
}

class textField extends StatefulWidget {
  textField({Key? key, required this.changeClassValue}) : super(key: key);

  Function changeClassValue;

  @override
  _textFieldState createState() => _textFieldState();
}

class _textFieldState extends State<textField> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.red,
          ),
          RawMaterialButton(
            onPressed: () {
              setState(() {
                widget.changeClassValue();
              });
            },
            child: Icon(Icons.send),
          )
        ],
      ),
    );
  }
}

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

  @override
  _containerState createState() => _containerState();
}

class _containerState extends State<container> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: 60.0,
        color: Colors.grey,
      ),
    );
  }
}

where the output would look like:

Answered By – tareq albeesh

Answer Checked By – Marie Seifert (FlutterFixes Admin)