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

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

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

Be First to Comment