Flutter TextField and Button Events using Controller

Buttons and Textboxes are important tools on any application layout design.

Table of Contents

TextBox (Text Field) in Flutter

In flutter there are two types of textboxes. First one is the TextField, which is more common and simple. Second one is the TextFormField which is commonly used in forms, supports validation and integration.

TextField(
             //properties 
          ),

TextFormField(
              //properties 
              //validator
             ),

Buttons in Flutter

Different types of buttons are there. RaisedButton, IconButton, backButton, FloatingActionButton, etc.

Here, let’s disscuss the RaisedButton which is more common and simple.

RaisedButton(
  child: Text("My Button"),
  onPressed : () {
      //Events 
   },
),

Where child is the button text which is ‘My Button‘ here

Generate a text on TextField while taping a button:

Tap or Press is an event by user. We already learnt about user interactivity and events in a previous lesson.

That techniques are not feasible with TextField events. So you need a controller to manage events.

First of all, you need to declare a TextEditingController at top.

Then place the controller inside a widget that you want to control those properties.

Finally, you can change the controller property like text on button pressed event.

class _MyAppState extends State<MyApp> { 
 TextEditingController My_controller = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("My App Title"),
      ),
      backgroundColor: Colors.white,
      body: Column(
        children: <Widget>[
          TextField(
            controller: My_controller,
          ),
           RaisedButton(
              child: Text("button name"),
              onPressed : () {
                setState(() {
                  My_controller.text = "YourOwnCodes.Com";
                });
              },
            ),
         ], 
       )
     );
   }
 }
}

Change Text Field value on button click flutter

Send a TextField text into another TextField while clicking on a button

Here two Textfieds and two controllers are required. Button On Pressed event sends first text field’s text into second text field.

class _MyAppState extends State<MyApp> {
  TextEditingController My_controller1 = new TextEditingController();
  TextEditingController My_controller2 = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("My App Title"),
        ),
        backgroundColor: Colors.white,
        body: Column(
          children: <Widget>[
            TextField(
              controller: My_controller2,
            ),

            RaisedButton(
              child: Text("My Button"),
              onPressed : () {
                setState(() {
                  My_controller2.text = My_controller1.text;
                });
              },
            ),

            TextField(
              controller: My_controller2,
            ),
          ],
        )
    );
  }
}

Send text field into another by button click flutter

Live Changing TextField’s Text while Typing on Another One

Here, if you type some text on a text field, simultaneously the text is visible on the second text field as live.

Here you need onChanged event on the first text field, and using controllers you can set both values equal.

class _MyAppState extends State<MyApp> {
  TextEditingController My_controller1= new TextEditingController();
  TextEditingController My_controller2= new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("My App Title"),
      ),
      backgroundColor: Colors.white,
      body: Column(
        children: <Widget>[
          TextField(
            controller: My_controller1,
            onChanged: (text)  {
              My_controller2.text = My_controller1.text;
            },
          ),
          Divider(),
          TextField(
            controller: My_controller2,
          ),
        ],
      )
    );
  }
}