Praktikum kali ini kita membahas mengenai dasar flutter seperti stateless dan statefull. Flutter merupakan sebuah open source framework untuk membuat aplikasi multi platform hanya dengan satu kode. Agar lebih memahami materi ini langsung saja kita ke langkah-langkah pengerjaan.
A. Lingkungan Pengembangan
Sediakan lingkungan flutter development berupa git, Android Studio, Visual Studio Code, dan instal SDK Flutter.
Download GIT : https://github.com/git-for-windows/git/releases/download/v2.51.0.windows.1/Git-2.51.0-64-bit.exe
Download Visual Studio : https://c2rsetup.officeapps.live.com/c2r/downloadVS.aspx?sku=community&channel=Release&version=VS2022&source=VSLandingPage&includeRecommended=true&cid=2030
Download Android Studio : https://developer.android.com/studio#get-android-studio
B. Stateless dan Statefull Widget
Stateless
Stateless widget digunakan ketika laman yang kita bikin datanya tidak mengalami perubahan ketika sebuah state dijalankan. Widget ini bersifat statis atau tetap biasanya hanya berisi text, logo aplikasi dan sebagainya. Untuk membuat laman Stateless silakan buat class pada directory lib dengan nama stateless.dart. Kemudian tambahkan kode program seperti berikut.
output :
Statefull
Statefull Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga berubah. Contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input lainnya berubah. Ada dua hal yang perlu kita ketahui di Statefull widget :
- MyStateFulWidget : class utama widget (immutable/tetap) kelas ini dianalogikan sebagai pintu masuk saja dan di dalamnya tidak terdapat state
- _MyStateFulWidgetState : Berfungsi pegang variabel yang bisa berubah misalnya counter, warna, input,text,dll
Untuk membuat Statefull widget silakan buat class statefull dan tambahkan kode pogram berikut
Output :
C. Basic Widget
Dari dua langkah di atas terdapat dasar-dasar widget yang telah kita implementasikan diantaranya :
Text
Text merupakan widget dasar yang digunakan utnuk menampilkan text pada layer.
Text memiliki proprti berikut :
- data : Berisi teks yang akan ditampilkan
- style : menerima objek TextStyle yang digunakan untuk mengontrol tampilan
- teks seperti fontSize, color, fontWeight (bold), fontStyle (italic)
- textAlign : mengatur teks secara horizontal seperti TextAlign.center, left, right
- maxLines :berfungsi membatas jumlah baris yang akan ditampilkan
- overflow : w mengatur teks yang terlalu panjang (TextOverflow.ellipsis) untuk menambahkan “…..” di akhir teks
Container
Container merupakan widget yang berfungsi sebagai KOTAK yang dapat menampung ssatu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget.
Properti Container :
- child : properti yang menerima satu widget yang akan ditempatkan didalam container
- color : mengatur warna background
- width dan height : mengatur lebar dan tinggi container
- padding : mengatur jarak antara konten dengan bagian dalam container
- margin : mengatur jarak antara container dengan widget lain diluar container
- decoration : properti yang menerima objek BoxDecoration yang dapat mengatur warna, border, corner radius dan shadow pada Container
ElevatedButton
ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow
Properti :
- onPressed berfungsi untuk menerima sebuah fungsi atau callback ketika tombol di tekan
- child properti yang berisi satu widget yang akan ditampilkan didalam tombol biasanya Text
atau Icon - style properti yang menerima objek ButtonStyle sehingga dapat menyesuaikan tampilan
tombol seperti backgroundColor, foregroundColor, padding dan shape
Icon
Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon
seperti Material Icons dari Google atau Cupertino Icons dari Apple
Properti :
- icon properti yang menerima object IconData yang merepresentasikan ikon yang akan
ditampilkan dari kelas Icons atau CupertinoIcons - color mengatur warna ikon
- size mengatur ukuran ikon dalam piksel
Image
Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumber
seperti asset, network, memory (byte data), file system.
Properti :
- image properti yang menerima object ImageProvider seperti AssetImage, NetworkImage dll)
- width dan height mengatur lebar dan tinggi gambar
- fit digunakan untuk menyesuaikan ukuran gambar seperti cover, fill, contain
- aligment digunakan untuk mengatur posisi gambar
CircleAvatar
CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau
inisialnya dalam bentuk lingkaran.
Properti :
- Child Widget yang akan ditampilkan di dalam lingkaran seperti Text (inisial) atau Icon.
- backgroundImage Digunakan untuk menampilkan gambar dari ImageProvider, seperti
NetworkImage atau AssetImage. - radius Mengontrol ukuran lingkaran, ukuran defaultnya adalah 20.
- backgroundColor Mengatur warna latar belakang lingkaran
C. Tugas
Membuat profil pribadi menggunakan staless widget.
D. Simpulan
Dari praktikum ini dapat disimpulkan bahwa proses pengembangan aplikasi dengan Flutter membutuhkan pemahaman awal mengenai instalasi dan konfigurasi lingkungan pengembangan yang tepat. Selain itu, pemahaman tentang perbedaan antara Stateless Widget dan Stateful Widget menjadi hal yang sangat penting, karena keduanya merupakan fondasi utama dalam membangun antarmuka pengguna. Stateless Widget digunakan untuk tampilan yang statis, sedangkan Stateful Widget memungkinkan tampilan aplikasi berubah sesuai interaksi dan perubahan data. Praktikum ini juga memberikan pengalaman dalam menggunakan berbagai basic widgets seperti Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar, yang menjadi komponen dasar dalam menyusun tampilan aplikasi Flutter. Dengan menguasai konsep dasar ini, pengembangan aplikasi yang lebih kompleks di Flutter akan menjadi lebih mudah dipahami dan diterapkan.