change a variable from another class

Question

i am quite a beginner with flutter. i hope someone can help me solve this problem...

I have this code, how can I make that when i press the RawMaterialButton of the textField() class, the changeClass variable of the chat() class changes from textField() to container() ?

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> {
  var changeClass = textField();

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

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

  @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: () {
              // on pressed change this row into container
            },
            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 :)

Answer 1

1. Define a state variable changeClass in _chatState
2. In the build method check if the changeClass is true then return the container Widget otherwise return Row widget.
3. setState the changeClass = trueinonPressed`

_

import 'package:flutter/material.dart';

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

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const 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,
              callback: () {
                setState(() {
                  changeClass = true;
                });
              },
            ),
    );
  }
}

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

  bool changeClass = false;
  VoidCallback callback;

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

class _textFieldState extends State<textField> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Flexible(
            child: Container(
              width: 300.0,
              height: 60.0,
              color: Colors.red,
            ),
          ),
          RawMaterialButton(
            onPressed: widget.callback,
            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,
      ),
    );
  }
}