Belajar Widget-widget Pada Flutter : Flutter Starter Pack Part 1
Bismillah pada kali kita akan membahas seputar widget-widget yang paling umum dan paling sering dipakai ketika kita membuat project menggunakan Flutter.
Membuat aplikasi dengan tampilan yang cantik, terstruktur, multi platform, dan interaktif dengan mudah merupakan kelebihan Flutter karena secara default Flutter menggunakan Material Design.
Dalam membuat UI kita akan sering mendengar istilah widget, lalu apa si sebenarnya widget itu.
Apa itu Widget ?
Bagi teman-teman yang belum mengerti apa itu widget, sederhananya pada Flutter seluruh tampilan seperti tombol, gambar, teks, list, ikon, bahkan satu layar pada handphone tersebut merupakan sekumpulan dari banyak widget.
Properti pada Widget
Setiap widget memiliki property, misalnya kita membuat sebuah tombol, lalu kita ingin agar warna backgroundnya itu hijau, dan warna tulisannya putih, lalu teksnya kita tebalkan.
Untuk melakukan itu semua, maka tombol kita atur melalui propertinya.
Dari gambar tersebut kita bisa pelajari bahwa ciri dari widget dia diawali dengan huruf kapital dia berupa class, digambar itu juga kita memiliki widget Scaffold, AppBar, dan Teks.
Lalu widget Scaffold dia memiliki property appBar, sedangkan pada widget AppBar dia memiliki property title, dan backgroundColor.
Widget di dalam widget
Dalam membuat aplikasi nantinya tentu kita akan menggunakan banyak widget, pada Flutter setiap Widget umumnya memiliki properti child atau anak, dari properti inilah kita bisa menggunakan widget didalamnya.
Selain child, kita juga mengenal property children yang artinya anak-anak, sesuai dengan namanya, berarti widget tersebut bisa memiliki banyak widget-widget, sebagai contoh kita ingin menampilkan daftar menu makanan, maka tentu akan banyak widget yang berfungsi untuk menampilkan keterangan nama makanan didalamnya.
General Widget
Ada banyak sekali widget-widget yang telah disediakan pada flutter, pada kali ini kita akan membahas widget apa saja yang paling penting untuk kita pahami saat pertama kali membuat aplikasi menggunakan Flutter ini.
Scaffold
Scaffold adalah widget utama untuk membuat sebuah halaman pada flutter, scaffold ini memiliki beberapa parameter yang biasa kita gunakan seperti appBar untuk membuat AppBar, body untuk bagian tubuhnya, atau kita juga bisa menambahkan floating action bar, maupun mengganti warna background bodynya.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: Center(
child: Text('You have pressed the button $_count times.')
),
backgroundColor: Colors.blueGrey.shade200,
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() => _count++),
tooltip: 'Increment Counter',
child: const Icon(Icons.add),
),
);
}
Stateless
Stateless Widget adalah widget yang berfungsi untuk menampilkan hal-hal yang sifatnya statis mudahnya setelah data ditampilkan maka kita tidak akan merubahnya lagi.
Untuk membuatnya kita cukup mengetikkan stl lalu akan ada pilihan untuk membuatnya.
Statefull
Statefull Widget adalah widget yang digunakan untuk menampilkan data-data yang dinamis atau data yang kita telah tampilkan sewaktu-waktu dapat mengalami perubahan.
Sedangkan untuk statefull kita cukup ketikkan stf lalu akan ada pilihan untuk membuatnya.
Layout
Untuk mengatur tata letak atau posisi widget, maka kita akan mengenal dua buah widget yaitu Row dan Column
Row akan menampilkan widget-widget secara horizontal atau sebaris dari kiri ke kanan, widget Row menggunakan property children artinya widget ini bisa diisi oleh banyak widget.
mari kita buat :
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Row"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Text("Halo 1 !!!"),
color: Colors.lime,
padding: EdgeInsets.all(16.0),
),
Container(
child: Text("Halo 2 !!!"),
color: Colors.purple,
padding: EdgeInsets.all(16.0),
),
Container(
child: Text("Halo 3 !!!"),
color: Colors.lightBlue,
padding: EdgeInsets.all(16.0),
),
],
));
}
}Column berlaku sebaliknya widget akan mengarah secara vertikal atau dari atas kebawah, widget ini juga menggunakan property children artinya widget ini bisa diisi oleh banyak widget.
mari kita buat :
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Column"),
),
body: Column(
children: <Widget>[
Container(
child: Text("Halo 1 !!!"),
color: Colors.lime,
padding: EdgeInsets.all(16.0),
),
Container(
child: Text("Halo 2 !!!"),
color: Colors.purple,
padding: EdgeInsets.all(16.0),
),
Container(
child: Text("Halo 3 !!!"),
color: Colors.lightBlue,
padding: EdgeInsets.all(16.0),
),
],
));
}
}Center
Center berfungsi agar posisi widget yang kita buat berada ditengah.
...
body: Center(
child: Text("Text di tengah",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold),
),
)
...Text
Text berfungsi untuk menampilkan sebuah teks biasa, atau bisa kita berikan style dengan menambahkan property style.
...
body: Text('Ini Text', style: TextStyle(
color: Colors.blue,
backgroundColor: Colors.pink,
fontSize: 20.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold
),)
...Icon
Widget ini untuk menggunakan icon yang telah disediakan, berikut adalah contohnya.
...
body: Container(
padding: EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Icon(Icons.access_alarm),
Text('Alarm')
],
),
Column(
children: <Widget>[
Icon(Icons.phone),
Text('Phone')
],
),
Column(
children: <Widget>[
Icon(Icons.book),
Text('Book')
],
),
],
),
)
...Container
Container merupakan widget yang fungsinya untuk membungkus widget lain sehingga dapat diberikan nilai seperti margin, padding, warna background, atau dekorasi.
...body: Container(
padding: EdgeInsets.all(32.0),
margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.purple),
// color: Colors.purple,
child: Text('Haiii', style: TextStyle(color: Colors.white, fontSize: 20.0),)
)...
SizedBox
yaitu untuk membuat box, widget ini biasanya digunakan untuk menambahkan jarak baik secara vertikal atau horizontal tergantung property yang kita atur.
...body: Column(
children: <Widget>[
Text("A", style: TextStyle(fontSize: 30.0),),
SizedBox(height: 20.0,),
Text("B", style: TextStyle(fontSize: 30.0),)
],
)...
Button
Terdapat 3 widget Button yang umumnya dipakai yaitu RaisedButton, MaterialButton, dan FlatButton
Pada raised button dan Material tombol akan sedikit menonjol.
Pada flat button tombolnya akan datar tanpa adanya efek-efek seperti bayangan dan lain-lain.
...
body: Column(
children: <Widget>[
RaisedButton(
color: Colors.amber,
child: Text("Raised Button"),
onPressed: () {},
),
MaterialButton(
color: Colors.lime,
child: Text("Material Button"),
onPressed: () {},
),
FlatButton(
color: Colors.lightGreenAccent,
child: Text("FlatButton Button"),
onPressed: () {},
),
],
)
...TextFormField
TextFormField merupakan widget yang berguna untuk membuat form untuk diisi user.
...body: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(hintText: "Username"),
),
TextFormField(
obscureText: true,
decoration: InputDecoration(hintText: "Password"),
),
RaisedButton(
child: Text("Login"),
onPressed: () {},
)
],
),
),
)...
InkWell
Inkwell berguna untuk menambahkan action pada widget seperti action onTap misalnya :
...body: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
print("Ditekan");
},
child: Container(
width: 100.0,
height: 100.0,
color: Colors.pink,
),
)
)...
Simple ListView
ListView digunakan untuk menampilkan daftar item dalam jumlah yang banyak.
import 'package:flutter/material.dart';
class PageBasicList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page Basic List'),
backgroundColor: Colors.red,
),
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: ListTile(
leading: Icon(Icons.access_alarm),
title: Text('Alarm'),
),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
ListTile(
leading: Icon(Icons.camera),
title: Text('Camera'),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Message'),
),
],
),
);
}
}
Navigator Push
Untuk membuka halaman baru, kita bisa menggunakan Navigator.push.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Navigator"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MaterialButton(
color: Colors.yellow,
child: Text("Page 2"),
onPressed: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) => PageTwo()
)
);
},
),
],
)
);
}
}
class PageTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("Page Two"),
),
);
}
}Navigator Pop
Sedangkan pop, kita menghilangkan halaman lapisan teratas atau yang sedang tampil, sehingga akan kembali ke halaman sebelumnya.
kita edit PageTwo dan kita tambahkan tombol back.
class PageTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Column(
children: <Widget>[
Text("Page Two"),
MaterialButton(
child: Text("Back"),
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
);
}
}Itulah beberapa widget yang umumnya kita gunakan, selamat mencoba dan bereksperimen
Seri selanjutnya :
atau
