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.
.
CodePudding user response:
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),
)
],
),
);
}
}