Home > Net >  How to set value for a text field based on value from another text field in Flutter automatically?
How to set value for a text field based on value from another text field in Flutter automatically?

Time:10-27

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?

enter image description here

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),
        ],
      ),
    );
  }
}
  • Related