Tutorial Flutter — Widgets
Mengenal Berbagai Widget pada Flutter
Halo semua, Jeremy disini. Kali ini kita akan membahas mengenai Widget yang ada di dalam flutter.
Nih saya kasitau dulu apa pengertian Widget.
Semua yang berhubungan dengan komponen Flutter disebut dengan Widget, dimulai dari text input, button, radio button, label text, dan sejenisnya. Widget ini disusun secara hierarki dan ditampilkan pada layar.
Oke udah tau kan pengertian Widget? Pada flutter terdapat dua widget utama yang berperan sebagai container dari seluruh layar kita, mereka disebut dengan Stateful Widget dan Stateless Widget.
Stateful Widget
Stateful Widget adalah widget yang dinamis atau dapat berubah-ubah. Dinamis yang dimaksud disini adalah setiap isi komponen dalam Stateful widget dapat berubah secara dinamis pada saat pengguna menggunakan aplikasi.
Code dasar dari Stateful Widget:
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container(
);
}
}Stateless Widget
Stateless Widget adalah widget yang statis atau tidak dapat berubah-ubah. Widget ini biasanya digunakan sebagai komponen sekunder didalam stateful widget yang dapat diisi sebuah komponen kustomisasi yang dibuat oleh pengguna.
Code dasar dari Stateless Widget:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
);
}
}Masih bingung cara membedakan Stateful Widget dan Stateless Widget? Oke saya kasih contoh deh.
Nah lihat deh contoh diatas, MyLoginScreen, MyCatalog, dan MyCart merupakan Stateful Widget, hal ini dibuktikan karena mereka merupakan komponen utama yang dapat berubah isinya.
Sedangkan MyAppBar, dan MyListItem adalah Stateless Widget yang merupakan komponen statis dan telah dikustomisasi secara kebutuhan oleh developer. Kedua widget ini berada didalam Stateful Widget karena komponen ini tidak akan berubah dan bersifat statis, sedangkan MyListItem bisa saja berubah menjadi komponen lain dan hal ini diizinkan oleh Stateful Widget yang bersifat dinamis.
Kita juga dapat melihat bahwa Stateless Widget melakukan extends ke class Stateful Widget, masih ingat konsep Inheritance kan? 😉
Sekarang kita akan membahas widget lainnya yang bisa digunakan dalam Flutter.
Icon
Seperti yang kita tau, icon adalah gambar kecil untk “mewakili” penjelasan sebuah object. pada aplikasi mobile, pada bagian atas aplikasi yang disebut dengan App Bar, kita akan melihat ada gambar kecil. Kita juga dapat menggunakan Icon untuk membuat gambar tersebut. Tapi kita hanya memanggil Icon — icon yang hanya tersedia di flutter.
Contoh syntax nya:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Icon(
Icons.image,
size: 64.0,
color: Theme.of(context).primaryColor,
),
);
}
}Text
Dari judulnya aja kita udah tau ya ini kegunaanya apa? Yap, tentu saja untuk menampilkan sebuah teks. Tanpa teks di aplikasi kita, tentu saja semua terasa jadi aneh bukan?
Code Syntax:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Text('Simple text demo.',
style: TextStyle(
color: Colors.blue,
fontSize: 32.0,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline),
),
);
}
}Text Field
Jika dalam sebuah aplikasi kita suka melihat sebuah tempat untuk memasukkan teks (input), maka ini adalah widget tersebut di Flutter. Jelas sekali kegunaannya, yaitu untuk membuat sebuah text input.
Code dengan Text Field:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//textfield sebuah widget yang digunakan user untuk memasukkan kalimat
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextEditingController controller = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("text field"),
),
body: Column(
children: <Widget>[
TextField(
onChanged: (value) {
setState(() {});
},
controller: controller,
),
Text(controller.text)
],
),
),
);
}
}Sekarang mari perhatikan, disni kita menambahkan TextEditorControler untuk menerima teks yang dimasukkan oleh pengguna pada Text Field dan dengan fungsi onChanged, kita akan mencetaknya di text widget setiap ada perubahan.
Text Form Field
Text Form Field digunakan apabila kita membutuhkan fungsi Validator yang berfungsi dalam melakukan validasi seperti teks kosong, atau angka kurang dari 10.
Codenya sebagai berikut:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
//textfield sebuah widget yang digunakan user untuk memasukkan kalimat
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextEditingController controller = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("text field"),
),
body: Column(
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Enter some text';
}
return null;
},
decoration: InputDecoration(labelText: 'Name *')
)
],
),
),
);
}
}Image
Sebelum memasukkan gambar, buka pubspec.yaml dan hapus tanda pagar pada assets.
Lalu buat folder dengan nama assets pada root folder. Caranya adalah, klik kanan pada mouse di ruang kosong explore lalu pilih new folder.
Kembali ke pubspec.yaml dan ketikan assets/ seperti yang ada di bawah.
Cara tadi adalah untuk melakukan konfigurasi agar kita bisa menyimpan gambar di folder assets dan Flutter bisa membaca gambar dari folder tersebut. Cara memanggilnya juga bisa menggunakan URL. Tapi untuk saat ini, kita menggunakan file lokal.
Codenya sebagai berikut:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: 10.0),
child: Image.asset('assets/nama_gambar.format_gambar', width:70, height: 30),
);
}
}Button
Sebuah aplikasi harus memiliki sebuah tombol untuk menjalankan perintah lanjutan dari pengguna. Contohnya adalah ketika pengguna sudah menuliskan sesuatu yang dia cari pada textf ield, maka dibutuhkan tombol untuk mencari apa yang sudah pengguna tulis. Oleh karena itu kita membutuhkan widget button.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 100),
child: new ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: new RaisedButton(
color: Colors.blue,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
splashColor: Colors.blueAccent,
onPressed: () {},
child: Text(
"Apply this buttom",
style: TextStyle(fontSize: 15),
)
),
),
)
],
)
));
}
}Pada code diatas, ada fungsi bernama ConstrainedBox. ConstrainedBox membantu memberikan batas tambahan(seperti minimal atau maksimal) suatu widget seperti container.
Dropdown Button
Dengan widget ini, kita bisa membuat sebuah tombol yang berisikan beberapa pilihan yang keluar jika kita menekannya. Seperti saat kita ingin membuat akun gmail, kita diminta untuk memilih jenis kelamin dan widget ini yang digunakan untuk menampilkan pilihan.
Codenya sebagai berikut:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
static List<String> menuItems = <String>[
'One',
'Two',
'Three',
'Four',
];
final List<DropdownMenuItem<String>> _dropDownMenuItems = menuItems
.map(
(String value) => DropdownMenuItem<String>(
value: value,
child: Text(value),
),
)
.toList();
String _btn1SelectedVal = 'One';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: <Widget>[
ListTile(
title: Text('DropDownButton with default:'),
trailing: DropdownButton<String>(
// Must be one of items.value.
value: _btn1SelectedVal,
onChanged: (String newValue) {
setState(() {
_btn1SelectedVal = newValue;
});
},
items: this._dropDownMenuItems,
),
),
],
),
),
);
}
}Disini kita dapat melihat List<String>. Dalam flutter, List sama seperti array pada bahasa programming lainnya. Cara penggunannya juga sama, hanya penamaanya saja yang berbeda. Disini, list akan diisi dan digunakan untuk membuat pilihan dalam dropdownbutton.
List View
List View sebetulnya termasud dalam widget layout. Seperti namanya, list view digunakan untuk membuat sebuah halaman daftar pada aplikasi mobile. Untuk list view akan ada chapter sendiri.
List Tile
Widget Ini bisa di bilang “anak-nya listview”, kenapa? Karena List Tile maksimal hanya dapat di isi di 3 bagian. Yaitu pada bagian kanan untuk gambar/icon, tengah untuk text title dan subtitle, lalu pada bagian kiri untuk icon/atau widget kecil lainnya seperti dropdownbutton. Widget ini membuat aplikasi terlihat seperti satu bagian dari sebuah daftar.
Switch
Kalian ingat ada tombol on-off dalam sebuah aplikasi seperti ini?
Codenya adalah sebagai berikut:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _switchVal = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 45),
child: Switch(
onChanged: (bool value) {
setState(() => this._switchVal = value);
},
value: this._switchVal,
))
],
)));
}
}Check Box
Check Box adalah sebuah kotak pilihan yang biasanya digunakan untuk membuat kolom kategori, pada kolom tersebut kita dapat menentukan banyak pilihan dengan menekan check box yang kalian inginkan dan mematikan centang di checkbox yang tidak diinginkan atau tidak diperlukan.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _checkBoxVal = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 45),
child: Checkbox(
onChanged: (bool value) {
setState(() => this._checkBoxVal = value);
},
value: this._checkBoxVal,
))
],
)));
}
}Progress Indicator
Ingat dalam sebuah aplikasi ketika kita berpindah halaman akan ada sebuah lingkaran yang berputar? Pada flutter, widget itu adalah Progress Indicator, terdapat dua indicator, yaitu linear dan circular.
Cara memanggilnya:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 45),
child: CircularProgressIndicator()
)
],
)));
}
}Radio Button
Sama halnya seperti check box. Radio juga digunkan untuk memilih dalam sebuah kategori atau hal lainnya yang berkaitan dengan pilihan. Namun, radio button hanya bisa memilih satu saja.
Codenya adalah sebagai berikut:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _radioVal = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
padding: EdgeInsets.only(top: 25),
child:Row(
children: [0, 1, 2, 3]
.map((int index) => Radio<int>(
value: index,
groupValue: this._radioVal,
onChanged: (int value) {
setState(() => this._radioVal = value);
},
))
.toList(),
)
)));
}
}Capek juga nulis tutorial sepanjang ini, yaudah deh, semoga bermanfaat dan happy coding ya! ^^
