How can I pass flutter textediting controller value from one stateless widget to another stateless widget - flutter

Question

Here Is the main.dart file:
import 'package:flutter/material.dart';
import 'package:untitled/button.dart';
import 'package:untitled/form.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[MyForm(), MyButton()],
),
),
);
}
}
Here is form.dart file:
import 'package:flutter/material.dart';
class MyForm extends StatelessWidget {
#override
Widget build(BuildContext context) {
TextEditingController x = TextEditingController();
return Container(
child: Center(
child: TextField(
controller: x,
decoration: InputDecoration(labelText: "Name"),
),
),
);
}
}
Here is button.dart file:
import 'package:flutter/material.dart';
class MyButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: ElevatedButton(
onPressed: () {
//if I press this button the textediting field will show 10
},
child: Text("Pass 10"),
),
),
);
}
}
How can I show data in text editingfield if I press the button in button.dart?
What is the optimal way to do these things?
Should I use statefulwidgets in statelesswidget or statelesswidgets in statefulwidgets?
My thought is to use redux or provider to pass this kind of things. Although I don't know this simple thing need state management system or not.

Answer 1

You need to lift the state up (create your controller in the main and pass it to the children)
// main.dart
class _MyHomePageState extends State<MyHomePage> {
TextEditingController x = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[MyForm(x), MyButton(x)],
),
),
);
}
}
class MyForm extends StatelessWidget {
MyForm(this.x);
final TextEditingController x;
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: TextField(
controller: x,
decoration: InputDecoration(labelText: "Name"),
),
),
);
}
}
class MyButton extends StatelessWidget {
MyButton(this.x);
final TextEditingController x;
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: ElevatedButton(
onPressed: () {
x...
//if I press this button the textediting field will show 10
},
child: Text("Pass 10"),
),
),
);
}
}