Dokumen ini membahas berbagai jenis widget tombol dan input dalam Flutter, termasuk button, flatbutton, iconbutton, dropdownbutton, textfield, radio, switch, dan checkbox. Setiap widget dilengkapi dengan contoh implementasi dan cara mengubah status atau nilai menggunakan setState. Widget-input tersebut dirancang untuk meningkatkan interaksi pengguna dengan aplikasi melalui berbagai pilihan dan pengaturan.

1. Button
dan
Input Widget

2. Button
Widget Button adalah widget
yang dapat menerima trigger
sentuhan atau dapat melakukan
suatu fungsi ketika disentuh.
Button

3. Macam-Macam Button
Widget button yang
tampilan default-nya
polos sehingga
harus diberi
parameter warna,
seperti parameter
color dan textColor
Widgett button
dengan icon, tidak
mempunyai child
untuk isi melainkan
menggunakan
parameter icon dan
tooltip
Bagian dari Material
Design widget dari
flutter, memiliki 2
parameter yaitu
onPressed dan child
FlatButton IconButton
Raised Button
Merupakan tombol
yang saat diklik akan
mucul pop-up daftar
beberapa item yang
dapat kita pilih salah
satu
DropdownButton

4. RaisedButton
RaisedButton(
onPressed: (){
// Aksi ketika button di klik
}
child: Text('Tombol'),
);

5. FlatButton
FlatButton(
color: Colors.blue,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
spalshColor: Colors.blueAccent,
onPressed: (){
// Aksi ketika button diklik
},
child: Text(
'Flat Button',
style: TextStyle(fontSize: 20.0),
),
)

6. IconButton
IconButton(
icon: Icon(Icons.volume_up),
tooltip: 'Increase volume by 10',
onPressed: (){
// Aksi ketika button di klik
},
)

7. DropdownButton
class FirstScreen extends StatefulWidget {
@override
_FirstScreenState createState() => _FirstScreenState(
);
}
class _FirstScreenState extends State<FirstScreen> {
String language;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: Appbar(
title: Text('First Screen'),
),

8. body: DropdownButton<String>(
items: <DropdownMenuItem<String>>[
DropdownMenuItem<String>(
value: 'Dart',
child: Text('Dart'),
),
DropdownMenuItem<String>(
value: 'Kotlin',
child: Text('Kotlin'),
),
DropdownMenuItem<String>(
value: 'Kotlin',
child: Text('Kotlin'),
),
],
value: language,
hint: Text('Select value'),
onChanged: (String value){
setState((){
language = value;
});
},
),
);
}
}

9. Input Widget
Salah satu bentuk interaksi dengan
pengguna adalah dengan menerima
input. Ada beberapa input widget
yang bisa digunakan supaya
pengguna bisa berinteraksi dengan
aplikasi.

10. WHAT WE ARE WORKING ON
Merupakan sebuah inputan
untuk teks.
Merupakan inputan yang
digunakan untuk memilih
salah satu dari beberapa
pilihan dalam suatu
kelompok
Merupakan inputan untuk
on dan off
TextField Radio
Switch
Merupakan unputan benar
atau salah. Checkbox akan
berisi centang jika nilainya
adalah benar dan kosong
jika salah
Chechbox

11. TextField
TextEditingController _controller =
TextEditingController();
TextField(
TextField(
controller: _controller,
)
)
Ada 2 cara untuk mendapatkan informasi teks,
yaitu TextEditingController seperti berikut
Dimana untuk mengatur teks bisa menggunakan cara
berikut
_controller.text;

12. TextField
Cara kedua adalah dengan menggunakan onChange seperti berikut
String _email = '';
TextField(
onChanged: (String value) {
setState((){
_email = value;
});
},
)

13. Switch
class _FirstScreenState extends State<FirstScreen> {
bool lightOn = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: Appbar(
title: Text('First Screen'),
),
body: Switch(
value: lightOn,
onChanged: (bool value) {
setState(() {
lightOn = value;
});
},
),
);
}
}

14. Radio
class _FirstScreenState extends State<FirstScreen>
{
String language;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: Appbar(
title: Text('First Screen'),
),

15. body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Radio<String>{
value: 'Dart',
groupValue: language,
onChanged: (String value) {
setState(() {
language = value;
});
},
},
title: Text('Dart'),
),
ListTile(
leading: Radio<String>{
value: 'Kotlin',
groupValue: language,
onChanged: (String value) {
setState(() {
language = value;
});
},
},
title: Text('Kotlin'),
),
ListTile(
leading: Radio<String>{
value: 'Swift',
groupValue: language,
onChanged: (String value) {
setState(() {
language = value;
});
},
},
title: Text('Swift'),
),
],
),
),
}
}

16. Checkbox
class _FirstScreenState extends State<FirstScreen> {
bool agree = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: ListTile(
leading: Checkbox(
onChanged: (bool value) {
setState(() {
agree = value;
});
},
),
title: Text('Agree / Dissagree'),
),
),
}
}