I am trying to build a form for data capture, I have some instances where some form section have duplicate textfields. I want to reduce redundancy and copy data from the previously keyed in textfields like section 1 and have it appear on the duplicate textfield fields in section 20 of the same form. I have only managed the example below where you have to click on a button for the textfield to be pushed to another field. The code
import "package:flutter/material.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final titleController = TextEditingController();
String text = "No Value Entered";
void _setText() {
setState(() {
text = titleController.text;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(labelText: 'Title'),
controller: titleController,
),
),
SizedBox(
height: 8,
),
RaisedButton(
onPressed: _setText,
child: Text('Submit'),
elevation: 8,
),
SizedBox(
height: 20,
),
Text(text),
],
),
);
}
}
How can I achieve this by passing one textfield value to another textfield without pressing the submit button and not changing the state of the entire form?
CodePudding user response:
Register a listener
on the TextEditingController
on the initState
method.
Then dispose of it on the dispose
method.
Like this:
import "package:flutter/material.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final TextEditingController titleController = TextEditingController();
String text = "No Value Entered";
@override
void initState() {
titleController.addListener(_setText);
super.initState();
}
@override
void dispose() {
titleController.dispose();
super.dispose();
}
void _setText() {
setState(() {
text = titleController.text;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(labelText: 'Title'),
controller: titleController,
),
),
SizedBox(
height: 8,
),
RaisedButton(
onPressed: _setText,
child: Text('Submit'),
elevation: 8,
),
SizedBox(
height: 20,
),
Text(text),
],
),
);
}
}
CodePudding user response:
You just need to add listeners to the respective textControllers as below:
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final titleController = TextEditingController();
final titleController2 = TextEditingController();
String text = "No Value Entered";
@override
void initState() {
super.initState();
titleController.addListener(() {
setState(() {
titleController2.text = titleController.text;
});
});
titleController2.addListener(() {
setState(() {
titleController.text = titleController2.text;
});
});
}
@override
void dispose() {
titleController.dispose();
titleController2.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(labelText: 'Title'),
controller: titleController,
),
),
Padding(
padding: const EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(labelText: 'Title'),
controller: titleController2,
),
),
SizedBox(
height: 8,
),
// RaisedButton(
// onPressed: _setText,
// child: Text('Submit'),
// elevation: 8,
// ),
// SizedBox(
// height: 20,
// ),
// Text(text),
],
),
);
}
}