flutter - 从文本到文本字段

Question

i am fairly new to flutter, can anyone help me? pls

This code make that what written in the TextField() class, once the RawMaterialButton() is pressed, transform it into text inside the container() class.

When I press the other RawMaterialButton() the code returns from the container() class to the textField() class.

I would like once back to the textField class, i would like that once back to the textField class, the text previously written is written in the TextField

How can I do? Thank you:)

import 'package:flutter/material.dart';

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;
  String? text;
  changeClassValue(String? newText) {
    setState(() {
      changeClass = !changeClass;
      text = newText;
    });
  }

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

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

  ValueChanged<String> changeClassValue;

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

class _textFieldState extends State<textField> {
  final textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.red,
            child: TextField(
              controller: textController,
            ),
          ),
          RawMaterialButton(
            onPressed: () {
              widget.changeClassValue(textController.text);
            },
            child: Icon(Icons.send),
          )
        ],
      ),
    );
  }
}

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

  String text;
  ValueChanged<String> changeClassValue;

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

class _containerState extends State<container> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.grey,
            child: Text(widget.text),
          ),
          RawMaterialButton(
            onPressed: () {
              widget.changeClassValue(widget.text);
            },
            child: Icon(Icons.edit),
          )
        ],
      ),
    );
  }
}

hope someone can help me.

.

Answer 1

Before we get into this, definitely make sure your class names start with a capital letter. Names like Container and TextField are already defined in Flutter so you'll probably need different names for these widgets.

The two widgets don't have to be StatefulWidgets but StatelessWidgets will make it easier to work with. The Chat widget should however be the only one with state here. This widget should have the TextEditingController in its state and pass it along to the textField to use.

The container should get its text property from this same TextEditingController .

Both widgets should also get a callback function, such as a VoidCallback to toggle between which one to show.

Here's an example:

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

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

class _ChatState extends State<Chat> {
  bool changeClass = false;
  final textController = TextEditingController();

  toggleClass() {
    setState(() {
      changeClass = !changeClass;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: changeClass
          ? ChatContainer(
              text: textController.text,
              toggleClass: toggleClass,
            )
          : ChatTextField(
              textController: textController,
              toggleClass: toggleClass,
            ),
    );
  }
}

class ChatTextField extends StatelessWidget {
  final TextEditingController textController;
  final VoidCallback toggleClass;

  ChatTextField({
    Key? key,
    required this.textController,
    required this.toggleClass,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.red,
            child: TextField(
              controller: textController,
            ),
          ),
          RawMaterialButton(
            onPressed: toggleClass,
            child: Icon(Icons.send),
          )
        ],
      ),
    );
  }
}

class ChatContainer extends StatelessWidget {
  final String text;
  final VoidCallback toggleClass;

  ChatContainer({
    Key? key,
    required this.text,
    required this.toggleClass,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.grey,
            child: Text(text),
          ),
          RawMaterialButton(
            onPressed: toggleClass,
            child: Icon(Icons.edit),
          )
        ],
      ),
    );
  }
}