Akan sangat menyenangkan jika kita bisa tahu cara membuat dan juga bagaimana penggunaan Custom Widgets dalam Flutter. Anda bisa menemukan beberapa cara untuk membuat sebuah widget custom, akan tetapi hal yang mendasar yaitu menggabungkan widget yang sederhana dan sudah ada menjadi sebuah widget yang lebih kompleks dan sesuai kebutuhan dan itulah yang disebut komposisi.
Pada pembahasan kali ini, Anda akan menemukan tata cara untuk membuat sebuah custom widget yang bisa Anda gunakan kembali di mana pun. Keterampilan khusus ini bisa Anda pelajari cara penerapannya dalam hal-hal berikut:
- Merancang UI widget
- Membangun desain menggunakan widget yang sudah ada
- Merencanakan dan menerapkan cara interaksi pengguna dengan widget
Membuat Faktor Ulang Peletakan UI
Anda mungin sudah tahu bahwa tata letak UI Flutter tersusun atas serangkaian widget. Ibaratkan pada setiap daun di pepohonan adalah sebuah widget, lalu tiap cabang pohon adalah widget dan semua UI itu sendiri pun merupakan sebuah widget. Itu adalah inti dari sebuah komposisi, yaitu widget yang terbuat dari widget sampai pada komponen yang terkecil.
Kode dalam sebuah pohon widget tersebut bisa amat bersarang. Untuk menghasilkan kode dari tata letak itu lebih mudah dibaca dan dipelihara, maka Anda perlu menyusun faktor sebuah kelompok widget pada kelas widget yang berdiri sendiri.
Baca Juga: Panduan Deploy Flutter Ke Google Play Store
Cara Ekstrak Widget
Berikut ini adalah cara penggunaan Custom Widgets dalam Flutter dan langkah ekstraksinya. Dalam folder lib, Anda buka main.dart, lalu Anda temukan My App widget tersebut dan tampilannya akan seperti berikut:
kelas MyApp memperluas StatelessWidget {
@override
Pembuatan widget(Konteks BuildContext) {
kembalikan MaterialApp(
...
isi: Area Aman(
...
),
);
}
}
Walaupun My App sudah termasuk sederhana, tapi Anda masih bisa menguraikannya lebih jauh lagi. Ini merupakan sebuah kesempatan baik bagi Anda untuk bisa belajar pemfaktoran ulang dan memanfaatkan alat Android Studio untuk langkah ekstrak widget.
Tempatkan kursor pada menu Stack dan Anda klik kanan supaya melihat tampilan konteks. Setelah itu Anda pilih menu Refactor, lalu Ekstrak dan Ekstrak Fluttrr Widget. Kemudian, selanjutnya adalah badannya atau disebut dengan Scaffold. Anda perlu menamainya dengan BodyWidget. Berikut susunannya:
kelas BodyWidget extends StatelessWidget {
const BodyWidget({
Kunci kunci,
}) : super (kunci: kunci);
@mengesampingkan
Pembuatan widget(Konteks BuildContext) {
kembalikan Tumpukan(
anak-anak: [
// ...
],
);
}
}Setelah fungsi di atas tersusun dan dijalankan, kemudian Android Studio otomatis akan membuat widget baru menggunakan Stack dan yang beberapa widget turunannya. Semua langkah sudah selesai dan Anda sudah bisa cara menghasilkan widget khusus melalui Flutter.
Anda bisa memperoleh BodyWidget dan memasukkan file sendiri lalu menggunakannya pada bagian lain dari aplikasi tersebut atau mungkin di aplikasi lain. Walaupun widget tersebut dianggap tidak menarik, tapi Anda masih bisa membuat widget lain berupa pemutar audio yang tentunya akan jauh lebih menarik melalui langkah penggunaan Custom Widgets dalam Flutter.
Anda masih bisa menemukan keuntungan lebih dari mengekstraksi sebagai sebuah widget daripada dimanfaatkan sebagai sebuah fungsi atau metode. Tujuan utamanya adalah untuk memungkinkan Anda bisa menggunakan kembali widget yang sudah diekstraksi.
Jenis Widget Khusus
Pembahasan selanjutnya adalah terkait cara mudah membuat sebuah custom widget, seperti komposisi dan menghasilkan widget yang kompleks dengan penggabungan widget yang lebih mudah dan sederhana. Tetap saja, akan jauh lebih baik jika bisa menyebutkan lebih banyak cara untuk membuat custom widget.
Jika Anda kesulitan untuk memperoleh widget yang diinginkan dengan cara menggabungkan dengan widget lain, maka Anda bisa menggambarkannya dalam kanvas yang tersedia di dalam Flutter. Cara ini bisa Anda terapkan dengan menggunakan CustomPainter. Anda bisa mulai mempelajari cara menggambar bentuk khusus menggunakan CustomPainter dalam Flutter serta cara yang baik untuk melakukannya.
Bagi Anda yang ingin masuk ke level yang cukup rendah, maka Anda bisa membuat widget menggunakan cara yang sama dengan yang dilakukan pada framework Flutter, yaitu dengan menggunakan RenderObjects.
Cara paling baik untuk memahaminya adalah dengan eksplor kode sumber dengan penggunaan Custom Widgets dalam Flutter yang sejenis dengan yang ingin Anda buat. Untuk itu, Anda bisa melihat Flutter Text Rendering agar menemukan contoh real pembuatan widget sejak awal.
Baca Juga: Cara Menggunakan Google Maps Pada Aplikasi Flutter, Simak Tutorial Lengkapnya
Langkah Membuat Widget
Berikut ini adalah beberapa langkah untuk membuat sebuah custom widget.
Merancang Widget
Sangat penting untuk memiliki gambaran visual dari representasi widget yang ingin Anda buat dalam pikiran Anda. Setelah itu Anda bisa mulai menuangkannya ke dalam sketsa di atas kertas agar penggambarannya lebih jelas atau Anda juga bisa memanfaatkan aplikasi desain untuk menyusunnya.
Tidak masalah jika Anda ingin mencoba mengadaptasi atau mengambil inspirasi dari desain orang lain. Bukan berarti Anda harus benar-benar menduplikasinya karena artinya Anda tidak orisinil. Gunakan ini hanya sebatas inspirasi untuk Anda kembangkan jadi lebih baik lagi.
Mendefinisikan Desain
Jika Anda sudah punya desain yang Anda inginkan, selanjutnya Anda perlu identifikasi widget kecil manakah yang akan Anda gunakan untuk menyusunnya. Seharusnya Anda bisa memperoleh sesuatu yang hampir sama dengan IconButton, Slider atau Container dan sejumlah Text widget. Jika letak widget berjajar, maka Anda juga akan membutuhkan widget Row.
Membuat Widget Dasar
Pada pembuatan dan penggunaan Custom Widgets dalam Flutter, Anda perlu membuat file baru dengan cara klik kanan pada folder lib dan memulih menu New, lalu file dan Anda beri nama audio_widget.dart. Setelah itu Anda bisa input kode di bawah:
impor 'paket:flutter/material.dart' ;
kelas AudioWidget memperluas StatelessWidget {
@mengesampingkan
Pembuatan widget(Konteks BuildContext) {
kembalikan Kontainer(
anak : Baris(
anak-anak: [
IconButton(ikon: Ikon(Ikon.play_arrow)),
Teks( '00:37' ),
Penggeser (nilai: 0 ),
Teks( '01:15' ),
],
),
);
}
}Hal yang perlu diperhatikan adalah Container, Button, Row, Slider dan Text pada widget. Lalu kembali pada lib/ main.dart, Anda scroll ke bawah file dan hapuskan baris yang ada tulisan TODO delete this line, lalu batalkan komentar yang ada di baris yang isinya TODO batalkan komentar pada baris ini. Setelah itu Anda tambahkan impor dengan cara berikut dan Anda jalankan aplikasinya:
impor 'audio_widget.dart' ;
Penyesuaian Tampilan
Supaya control tampak mirip dengan pemutar audio dari MediaElement.js, maka Anda harus melakukan penyesuaian. Pertama Anda buka lib/ audio_widget.dart. Lalu hal yang harus Anda lakukan adalah mengatur ketinggian widget agar selalu konstan dan tidak menutup sebagian besar layar. Anda bisa tambahkan baris di bawah ini pada Container widget sebelum “child” parameter:
tinggi: 60 ,
Di dalam akan tampak hot reload yang bersinar, lalu Anda tekan menu Lightning warna kuning pada Android Studio supaya dapat pembaruan instan. Jika sudah begitu, maka Anda akan menemukan posisi widget di tempat seharusnya.
Pada langkah lanjutan, Anda akan mengatur interaksi pengguna yang banyak bersinggungan dengan tombol-tombol pada widget. Lalu ada definisi parameter yang akan menentukan cara pengaturan nilai operasi pada widget dan juga penggunaan Custom Widgets dalam Flutter. Hal itu bisa Anda pelajari dengan mendaftar kursus mobile applikasi di Course-Net. Daftarkan diri Anda sekarang juga.
