[Flutter][17] Form (Bagian 2) TextEditingController, Mengirim data dari form

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Wednesday, 24 Apr 2019

Hello world,

Pembahasan lanjutan mengenai form (bagian 2) dimana saya akan menjelaskan penggunaan texteditingcontroller. Apa itu? TextEditingController adalah controller dari form/textfield yang dapat diedit/diisi. Ibarat sebuah form dalam sebuah aplikasi harus memiliki identitas pada masing-masing textfieldnya. Untuk membedakan value dan attribute lainnya. Singkatnya saat tombol submit diklik, value dari sebuah textfield akan diambil dari controllernya. Jika TextEditingController tidak diset maka value dari textfield tersebut tidak dapat dikirim.  Oke langsung saja masuk ke contoh. Di bawah ini saya beri contoh dari post sebelumnya dimana ada sebuah textfield untuk mengisi nama dan sebuah tombol submit.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatefulWidget {
@override
_MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
TextField(
decoration: new InputDecoration(decoration: new InputDecoration(
hintText: "Nama User",
labelText: "Nama",
icon: Icon(Icons.people),
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0)
),
),
keyboardType: TextInputType.numberWithOptions(),
),
RaisedButton(
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {},
),
],
),
),
);
}
}

Selanjutnya kita akan membuat controller pada textfield dan membuat action saat tombol diklik. Sebagai catatan, berbeda dari post sebelumnya di sini saya menggunakan Statefullwidget. Apa bedanya dengan StatelessWidget? akan saya bahas di post lain nantinya. 

- Membuat Controller.

Untuk membuat controller kita cukup menambahkan code seperti contoh di bawah ini (tanda kuning). Setiap textfield akan memiliki controllernya masing-masing.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatefulWidget {
@override
_MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {

TextEditingController controllernama = new TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
TextField(
controller: controllernama,
decoration: new InputDecoration(
hintText: "Nama User",
labelText: "Nama",
icon: Icon(Icons.people),
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0)
),
),
keyboardType: TextInputType.numberWithOptions(),
),
RaisedButton(
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {},
),
],
),
),
);
}
}

- Membuat Action onPress pada tombol

Di sini saya contohkan menggunakan alert. Saat tombol diklik maka text akan dikirimkan dan ditampilkan ke dalam alert. Penjelasan mengenai alert akan saya bahas di post selanjutnya.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatefulWidget {
@override
_MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {

TextEditingController controllernama = new TextEditingController();

void _kirimdata(){
AlertDialog alertDialog = new AlertDialog(
content: new Container(
height: 200.0,
child: new Column(
children: <Widget>[
new Text("Nama Lengkap : ${controllernama.text}"),
RaisedButton(
child: new Text("OK"),
onPressed: ()=>Navigator.pop(context),
)
],
),
),
);
showDialog(context: context, child: alertDialog);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
TextField(
controller: controllernama,
decoration: new InputDecoration(
hintText: "Nama User",
labelText: "Nama",
icon: Icon(Icons.people),
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0)
),
),
keyboardType: TextInputType.numberWithOptions(),
),
RaisedButton(
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {
_kirimdata();
},
),
],
),
),
);
}
}

Pada TextEditingController, value dari sebuah textfield diambil dengan property text. Pada contoh di atas pemanggilannya adalan dengan controllernama.text.

Selamat Mencoba :)