Latest blogs
Created by - Kurnia Andi Nugroho
Flutter Widget ListTile
WIDGET LISTTILEadalah sebuah widget yang digunakan dalam pengembangan aplikasi mobile (seperti Flutter atau Android) untuk membuat sebuah elemen list tile. ListTile biasanya digunakan sebagai bagian dari sebuah daftar (list) yang memuat informasi tertentu, seperti judul, deskripsi, atau gambar. Widget ListTile memungkinkan pengembang aplikasi untuk membuat list tile yang bisa dikustomisasi sesuai dengan kebutuhan aplikasi dan memberikan interaksi yang baik bagi pengguna.PROPERTIBerikut adalah beberapa properti umum yang tersedia pada widget ListTile dalam Flutter:title: menentukan teks yang ditampilkan sebagai judul list tile.subtitle: menentukan teks yang ditampilkan sebagai subjudul list tile.leading: menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kiri list tile.trailing: menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kanan list tile.isThreeLine: menentukan apakah list tile harus memiliki subjudul (subtitle) atau tidak. Nilai default-nya adalah false.dense: menentukan apakah list tile harus memiliki jarak yang lebih rendah atau tidak. Nilai default-nya adalah false.enabled: menentukan apakah list tile bisa diklik atau tidak. Nilai default-nya adalah true.selected: menentukan apakah list tile harus ditandai sebagai dipilih atau tidak. Nilai default-nya adalah false.onTap: menentukan aksi yang akan dilakukan ketika list tile diklik.onLongPress: menentukan aksi yang akan dilakukan ketika list tile ditekan lama.EXAMPLEBerikut adalah contoh sintaks widget ListTile dalam Flutter:ListTile( title: Text('Judul'), subtitle: Text('Subjudul'), leading: Icon(Icons.person), trailing: Icon(Icons.arrow_forward), onTap: () { // aksi ketika list tile diklik }, ) title: digunakan untuk menentukan teks yang ditampilkan sebagai judul list tile.subtitle: digunakan untuk menentukan teks yang ditampilkan sebagai subjudul list tile.leading: digunakan untuk menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kiri list tile.trailing: digunakan untuk menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kanan list tile.onTap: digunakan untuk menentukan aksi yang akan dilakukan ketika list tile diklik.Contoh di atas hanya sebagai contoh sintaks dasar dari widget ListTile. Kita bisa menambahkan atau mengubah properti lain sesuai dengan kebutuhan aplikasi yang kita kerjakan.
More detailsPublished - Thu, 02 Feb 2023
Created by - Kurnia Andi Nugroho
Flutter Widget Dialog
WIDGET DIALOGAdalah salah satu widget built-in dalam Flutter yang digunakan untuk menampilkan pesan modal ke pengguna. Dialog biasanya digunakan untuk menampilkan informasi penting, meminta konfirmasi dari pengguna, atau meminta masukan dari pengguna. Dalam Flutter, beberapa contoh dialog built-in meliputi AlertDialog, SimpleDialog, dan BottomSheet.PROPERTIBerikut adalah beberapa properti yang sering digunakan dalam widget Dialog dalam Flutter:title: Judul dari dialog.content: Isi dari dialog, biasanya berupa widget Text atau beberapa widget lain.actions: Tombol yang dapat ditemukan di bagian bawah dialog.backgroundColor: Warna latar belakang dari dialog.elevation: Tinggi bayangan yang ditampilkan di bawah dialog.semanticLabel: Label semantik yang dapat digunakan oleh perangkat bantuan aksesibilitas.shape: Bentuk dari dialog, biasanya menggunakan RoundedRectangleBorder.Ini hanya beberapa contoh properti yang sering digunakan dalam widget Dialog dalam Flutter. Ada beberapa properti lain yang dapat digunakan sesuai dengan kebutuhan pengembang aplikasi.EXAMPLEBerikut adalah sintaks umum untuk membuat Dialog widget dalam Flutter:showDialogshowDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text("Judul Dialog"), content: Text("Isi dari Dialog"), actions: <Widget>[ FlatButton( child: Text("Tutup"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan Dialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek AlertDialog dengan properti title, content, dan actions. Kita juga menambahkan tombol tutup yang dapat ditemukan pada bagian bawah Dialog. Saat pengguna menekan tombol tutup, kita memanggil Navigator.of(context).pop() untuk menutup Dialog.Ini hanya contoh sintaks umum untuk membuat Dialog widget dalam Flutter. Ada beberapa variasi lain dari Dialog widget seperti SimpleDialog, BottomSheet, dll. yang dapat dibuat dengan sintaks yang berbeda.SimpleDialogBerikut adalah sintaks umum untuk membuat SimpleDialog widget dalam Flutter:showDialog( context: context, builder: (BuildContext context) { return SimpleDialog( title: Text("Judul SimpleDialog"), children: <Widget>[ SimpleDialogOption( child: Text("Pilihan 1"), onPressed: () { Navigator.of(context).pop(); }, ), SimpleDialogOption( child: Text("Pilihan 2"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan SimpleDialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek SimpleDialog dengan properti title dan children. Dalam children, kita membuat beberapa objek SimpleDialogOption sebagai pilihan yang dapat dipilih oleh pengguna. Saat pengguna memilih salah satu pilihan, kita memanggil Navigator.of(context).pop() untuk menutup SimpleDialog.
More detailsPublished - Wed, 01 Feb 2023
Created by - Kurnia Andi Nugroho
Stateless Widget
STATLESS WIDGETStatelessWidget adalah kelas yang digunakan dalam Flutter untuk membuat widget yang tidak memiliki state atau data yang berubah-ubah. StatelessWidget digunakan untuk membuat widget yang hanya digunakan untuk menampilkan data saja dan tidak memiliki interaksi dengan pengguna. Misalnya, widget yang digunakan untuk menampilkan teks atau gambar.Syntax dasar dari StatelessWidget adalah sebagai berikut:class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( // code to build the widget goes here ); } } Kelas MyWidget di atas adalah contoh kelas yang mengextend dari StatelessWidget. Fungsi build(BuildContext context) diimplementasi untuk mengembalikan widget yang akan ditampilkan. @override digunakan untuk menKitakan bahwa fungsi build diatas merupakan implementasi dari fungsi yang sudah ada di kelas induk (StatelessWidget).Secara umum, Kita harus menggunakan StatelessWidget jika widget yang Kita buat tidak akan berubah setelah dibuat. StatelessWidget ini sangat efisien dalam hal performa karena ia hanya akan dibangun sekali saat dibuat dan tidak akan dibangun kembali saat ada perubahan dalam aplikasi.PROPERTIBeberapa properti yang dapat digunakan dalam kelas StatelessWidget di Flutter adalah:key: digunakan untuk memberikan identitas unik pada sebuah widget sehingga dapat digunakan untuk melakukan operasi seperti animasi.child: digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini.color: digunakan untuk mengatur warna dari widget.padding: digunakan untuk menentukan jarak antara widget dengan batasnya.alignment: digunakan untuk menentukan posisi widget dalam container.constraints: digunakan untuk menentukan batasan ukuran widget.transform: digunakan untuk melakukan transformasi pada widget seperti rotasi, skala, dll.decoration: digunakan untuk menambahkan dekorasi pada widget seperti border, background, dll.Itu hanyalah beberapa properti yang bisa digunakan dalam StatelessWidget, namun masih ada yang lain yang tersedia dalam framework Flutter. Perlu diingat, setiap properti yang digunakan akan berpengaruh pada performa aplikasi jika digunakan dalam jumlah besar, sebaiknya digunakan dengan bijak dan sesuai kebutuhan aplikasi.EXAMPLEProperti child dalam StatelessWidget digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini. Widget anak ini akan ditampilkan dalam container yang ditentukan oleh widget ini.Sintaks penggunaannya adalah sebagai berikut:class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Text("Hello World!"), ); } } Di contoh diatas, widget Text dengan teks "Hello World!" akan ditampilkan dalam container yang ditentukan oleh MyWidget. Kita dapat menambahkan beberapa widget anak dengan menggunakan widget lain sebagai child.Kita juga bisa menggunakan children property untuk menambahkan beberapa widget anak sekaligusclass MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( children: <Widget>[ Text("Hello World!"), Text("Hello World!"), Text("Hello World!"), ], ); } } Properti child atau children ini sangat berguna untuk menyusun layout dan mengelompokkan widget anak dalam satu widget induk.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
Stateful Widget
STATEFUL WIDGETStatefulWidget adalah jenis widget di Flutter yang menyimpan data internal yang dapat diubah. StatefulWidget dapat diubah secara dinamis selama runtime, dan juga dapat diperbarui ketika ada perubahan dalam data internalnya. StatefulWidget harus digunakan jika Kita memerlukan widget yang dapat diubah setelah dibangun.Sintaks untuk membuat StatefulWidget di Flutter adalah sebagai berikut:class MyWidget extends StatefulWidget { @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Container( child: Text('Counter: $_counter'), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), ); } } Di atas, kelas MyWidget yang mengextend StatefulWidget, dan kelas ini memiliki metode createState() yang mengembalikan objek baru dari kelas _MyWidgetState. Kelas _MyWidgetState mengextend State<MyWidget>, di mana MyWidget adalah kelas induknya, dan ini memiliki metode build(BuildContext context) yang digunakan untuk membuat tampilan widget.Secara umum, StatefulWidget memiliki 2 class yaitu :class yang mengextend StatefulWidgetclass yang mengextend State (T = class yang mengextend StatefulWidget)Dan class yang mengextend State yang memiliki metode build yang digunakan untuk membuat tampilan widget.PROPERTIBeberapa properti yang dapat digunakan pada StatefulWidget di Flutter adalah sebagai berikut:key: Digunakan untuk mengidentifikasi widget unik dalam hierarki widget.child: Digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini.initialData: Digunakan untuk menentukan data awal yang akan digunakan oleh widget.state: Digunakan untuk mengakses objek State yang digunakan oleh widget.build: Fungsi yang digunakan untuk membuat tampilan widget.didUpdateWidget: Dipanggil ketika widget diperbarui, dapat digunakan untuk melakukan aksi seperti memperbarui data internal.dispose: Dipanggil ketika widget dihapus dari hierarki widget, dapat digunakan untuk membersihkan sumber daya yang digunakan oleh widget.createState: Dipanggil ketika widget dibuat, digunakan untuk menciptakan objek State yang akan digunakan oleh widget.Namun, beberapa properti diatas adalah properti yang umum digunakan pada semua jenis widget, sebagian lagi adalah properti yang spesifik pada StatefulWidget.EXAMPLEProperti initialData digunakan untuk menentukan data awal yang akan digunakan oleh StatefulWidget. Sintaks untuk menentukan data awal pada StatefulWidget adalah sebagai berikut:class MyWidget extends StatefulWidget { final String initialText; MyWidget({required this.initialText}); @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { String _text; @override void initState() { super.initState(); _text = widget.initialText; } @override Widget build(BuildContext context) { return Container( child: Text(_text), ); } } Di atas, kelas MyWidget yang menerima parameter initialText pada constructor-nya. Kemudian di kelas _MyWidgetState, kami menggunakan widget.initialText untuk menentukan nilai awal dari _text.Kita dapat menggunakan properti initialData pada constructor dari class yang mengextend StatefulWidget, dan mengambil data ini di kelas yang mengextend State dengan mengakses widget.initialData pada method initState atau di method lain yang sesuai.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
Macam Macam Widgets Flutter
WIDGETSWidgets Flutter adalah komponen visual yang digunakan dalam aplikasi Flutter untuk menampilkan dan mengatur tampilan. Widgets ini dapat digunakan untuk membuat layout, menambahkan interaksi, dan lain-lain. Widget Flutter dapat dikombinasikan dengan widget lainnya untuk membuat tampilan yang lebih kompleks.MACAM MACAM WIDGETSAda berbagai macam widget yang tersedia di Flutter, diantaranya:Container: digunakan untuk menampung widget lain dan memberikan gaya seperti ukuran, posisi, margin, dan padding.Row and Column: digunakan untuk mengatur posisi widget dalam baris atau kolom.Text: digunakan untuk menampilkan teks dengan berbagai jenis font, ukuran, dan gaya.Image: digunakan untuk menampilkan gambar dari file atau sumber internet.Button: digunakan untuk menambahkan tombol interaktif dengan berbagai gaya.Input: digunakan untuk menambahkan elemen input seperti text field dan checkbox.ListView: digunakan untuk menampilkan daftar item dengan scroll.Stack: digunakan untuk menumpuk widget satu di atas yang lain.Expanded: digunakan untuk mengatur ukuran widget sesuai dengan ruang yang tersedia.StreamBuilder: digunakan untuk membuat widget yang memantau stream dan mengubah tampilan sesuai dengan perubahan data.Itu hanya beberapa contoh widget yang tersedia di Flutter, masih ada banyak lagi yang dapat digunakan untuk membuat aplikasi yang interaktif dan menarik.CONATAINERSintaks dasar untuk menggunakan widget Container di Flutter adalah sebagai berikut:Container( width: double, height: double, margin: EdgeInsets, padding: EdgeInsets, decoration: BoxDecoration, child: Widget, ) width dan height digunakan untuk mengatur ukuran container.margin digunakan untuk menambahkan margin di luar container.padding digunakan untuk menambahkan padding di dalam container.decoration digunakan untuk memberikan gaya seperti warna latar, gradien, atau bingkai.child digunakan untuk menambahkan widget yang akan ditampung oleh container.Contoh:Container( width: 200, height: 200, margin: EdgeInsets.all(10), padding: EdgeInsets.all(20), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10) ), child: Text("Hello World"), ) Container diatas akan menampilkan sebuah teks "Hello World" dalam lingkaran biru dengan margin 10 dan padding 20.Perlu diingat bahwa setiap property/field yang dituliskan dalam sintaks diatas tidak harus diisi semua, sesuai kebutuhan aplikasi kita.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
Komponen Framework7
Komponen merupakan bagian dari keseluruhan, begitu juga didalam framework7 terdapat banyak sekali components pendukung yang disediakan, hal ini tidak lain untuk mempermudah dalam pengembangan sebuah aplikasi berbasis mobile ataupun desktop dengan framework7. jika teman-teman sering mempelajari bahasa pemrograman HTML, maka nanti tidak akan asing dengan istilah components di framework7. Pada tutorial sebelumnya kita semua telah mengetahui cara instalasi dan inisialisasi framework7, pada pembahasan kali ini, saatnya kita akan belajar tentang komponen nya.Kami sarankan dalam mengikuti pembelajaran ini sembari membuka website official Dokumen dengan tujuan Agar proses pembelajaran menjadi lebih mudah. jika sudah, teman-teman bisa melihat beberapa komponen, mulai Accordion, Action sheet, Appbar Dst. untuk prakteknya, mari kita coba menerapkan komponen Toolbar/tabbar didalam aplikasi kita sebelumnya.seperti biasanya kita buka terlebih dahulu recent project kita menggunakan code editor.Perlu di ingat, dalam studi pembelajaran kali ini kita akan fokus pada satu bab saja yaitu tabbar/toolbar, toolbar sendiri memiliki beberapa jenis, mulai dari static toolbar, fixed toolbar, dan Common toolbar. pada project sebelumnya toolbar kita masih berupa static toolbar, yang mana tampilan nya masih sangat biasa,Gambar diatas merupakan toolbar dengan jenis static,kali ini kita akan mengeksplorasi fitur/jenis lainnya yang sudah disediakan di dokumen komponen framework7. kita bisa membuat tabbar dengan tampilan icon dan juga tulisan agar terlihat user friendly. sebelumnya kita harus menambhakan library font kedalam folder assets/.teman-teman bisa mengunduh via link github. ja sudah d unduh didalamnya terdapat folder fonts dan juga satu file css. untuk penempatannya akan kita lettakkan pada direktori assets, lebih lengkapnya seperti gambar dibawah ini.Untuk penempatan file css, disini kami meletakkan didalam satu folder css, agar lebih rapih dalam pengelompokkan jenis file.Sampai disini kita berhasil menaambah library fonts framework7 didalam project kita, yang jadi pertanyaannya adalah apa tujuan dari penambahan library ini? sebelum kami jawab, mari kita lanjutkan step berikutnya heheheh.mari kita menambah code <link rel="stylesheet" href="assets/css/framework7-icons.css"> kedalam file index.html lebih tepatnya didalam tag <head>, agar library yang kita tambahkan didalam folder assets terbaca oleh framework7, jika sudah maka akan seperti ini<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#2196f3"> <title>My App</title> <link rel="stylesheet" href="assets/css/framework7-bundle.min.css"> <link rel="stylesheet" href="assets/css/my-app.css"> <link rel="stylesheet" href="assets/css/framework7-icons.css"> </head> Setelah semuanya selesai kita bisa menggunakan fitur icons didalam framework7.untuk lebih lengkapnya, teman- teman bisa menggunakan cheatsheet berikut untuk dengan mudah menemukan ikon yang ingin teman-teman gunakan.Cara untuk menggunakan icon diatas adalah dengan menambahkan class <i class="icon f7-icons ">dot_radiowaves_left_right</i> code dot_radiowaves_left_right menunjukan nama icon yang hendak digunakan, ini merupakan contoh basic dalam penggunaan icons di framework7. kami menerapkan kode diatas kedalam tabbar, jadi toolbar/tabbar aplikasi kita akan berubah menjadi icon bukan static lagi.seperti gambar dibawah ini.Nah, kita berhasil merubah tabbar kita menjadi bentuk icons, bagaiamana? mudah bukan .untuk kelengkapan code index.html bisa teman-teman tinjau dibawah ini.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#2196f3"> <title>My App</title> <link rel="stylesheet" href="assets/css/framework7-bundle.min.css"> <link rel="stylesheet" href="assets/css/my-app.css"> <link rel="stylesheet" href="assets/css/framework7-icons.css"> </head> <body> <div id="app"> <div class="view view-main"> <div data-name="home" class="page"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Aplikasi Sederhana</div> </div> </div> <div class="toolbar tabbar tabbar-labels toolbar-bottom color-theme-green"> <div class="toolbar-inner"> <a href="#tab-4" class="tab-link tab-link-active"> <i class="f7-icons ">house</i> <span class="tabbar-label color-theme-green">Home</span> </a> <a href="#tab-6" class="tab-link"> <i class="icon f7-icons ">dot_radiowaves_left_right</i> <span class="tabbar-label color-theme-green">Informasi</span> </a> </div> </div> <div class="page-content"> <center> <p>Silahkan Mencoba</p> </center> <a href="/accordion/" class="inner-patient-col button button-raised color-orange">Accordion</a> <a href="/action/" class="inner-patient-col button button-raised color-lightblue">action sheet</a> <a href="/app/" class="inner-patient-col button button-raised color-pink">app bar</a> <a href="/area/" class="inner-patient-col button button-raised color-yellow">Area chart</a> <a href="/auto/" class="inner-patient-col button button-raised color-deeppurple">Auto Complete</a> <a href="/badge/" class="inner-patient-col button button-raised color-teal">Badge</a> <a href="/contentblock/" class="inner-patient-col button button-raised color-red">Content block</a> </div> </div> <div data-name="accordion" class="page stacked"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Accordion</div> </div> </div> <div class="toolbar toolbar-bottom"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> <div class="page-content"> <center> <p>Ini Halaman Accordion</p> </center> <div class="list accordion-list"> <ul> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 1</div> </div> </a> <div class="accordion-item-content">Item 1 content ...</div> </li> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 2</div> </div> </a> <div class="accordion-item-content">Item 2 content ...</div> </li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script> <script type="text/javascript" src="assets/js/my-app.js"></script> </body> </html>
More detailsPublished - Wed, 09 Nov 2022
Popular blogs
Created by - Kurnia Andi Nugroho
Flutter Widget ListTile
WIDGET LISTTILEadalah sebuah widget yang digunakan dalam pengembangan aplikasi mobile (seperti Flutter atau Android) untuk membuat sebuah elemen list tile. ListTile biasanya digunakan sebagai bagian dari sebuah daftar (list) yang memuat informasi tertentu, seperti judul, deskripsi, atau gambar. Widget ListTile memungkinkan pengembang aplikasi untuk membuat list tile yang bisa dikustomisasi sesuai dengan kebutuhan aplikasi dan memberikan interaksi yang baik bagi pengguna.PROPERTIBerikut adalah beberapa properti umum yang tersedia pada widget ListTile dalam Flutter:title: menentukan teks yang ditampilkan sebagai judul list tile.subtitle: menentukan teks yang ditampilkan sebagai subjudul list tile.leading: menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kiri list tile.trailing: menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kanan list tile.isThreeLine: menentukan apakah list tile harus memiliki subjudul (subtitle) atau tidak. Nilai default-nya adalah false.dense: menentukan apakah list tile harus memiliki jarak yang lebih rendah atau tidak. Nilai default-nya adalah false.enabled: menentukan apakah list tile bisa diklik atau tidak. Nilai default-nya adalah true.selected: menentukan apakah list tile harus ditandai sebagai dipilih atau tidak. Nilai default-nya adalah false.onTap: menentukan aksi yang akan dilakukan ketika list tile diklik.onLongPress: menentukan aksi yang akan dilakukan ketika list tile ditekan lama.EXAMPLEBerikut adalah contoh sintaks widget ListTile dalam Flutter:ListTile( title: Text('Judul'), subtitle: Text('Subjudul'), leading: Icon(Icons.person), trailing: Icon(Icons.arrow_forward), onTap: () { // aksi ketika list tile diklik }, ) title: digunakan untuk menentukan teks yang ditampilkan sebagai judul list tile.subtitle: digunakan untuk menentukan teks yang ditampilkan sebagai subjudul list tile.leading: digunakan untuk menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kiri list tile.trailing: digunakan untuk menentukan widget yang ditampilkan sebagai icon atau gambar di sebelah kanan list tile.onTap: digunakan untuk menentukan aksi yang akan dilakukan ketika list tile diklik.Contoh di atas hanya sebagai contoh sintaks dasar dari widget ListTile. Kita bisa menambahkan atau mengubah properti lain sesuai dengan kebutuhan aplikasi yang kita kerjakan.
More detailsPublished - Thu, 02 Feb 2023
Created by - Kurnia Andi Nugroho
Flutter Widget Dialog
WIDGET DIALOGAdalah salah satu widget built-in dalam Flutter yang digunakan untuk menampilkan pesan modal ke pengguna. Dialog biasanya digunakan untuk menampilkan informasi penting, meminta konfirmasi dari pengguna, atau meminta masukan dari pengguna. Dalam Flutter, beberapa contoh dialog built-in meliputi AlertDialog, SimpleDialog, dan BottomSheet.PROPERTIBerikut adalah beberapa properti yang sering digunakan dalam widget Dialog dalam Flutter:title: Judul dari dialog.content: Isi dari dialog, biasanya berupa widget Text atau beberapa widget lain.actions: Tombol yang dapat ditemukan di bagian bawah dialog.backgroundColor: Warna latar belakang dari dialog.elevation: Tinggi bayangan yang ditampilkan di bawah dialog.semanticLabel: Label semantik yang dapat digunakan oleh perangkat bantuan aksesibilitas.shape: Bentuk dari dialog, biasanya menggunakan RoundedRectangleBorder.Ini hanya beberapa contoh properti yang sering digunakan dalam widget Dialog dalam Flutter. Ada beberapa properti lain yang dapat digunakan sesuai dengan kebutuhan pengembang aplikasi.EXAMPLEBerikut adalah sintaks umum untuk membuat Dialog widget dalam Flutter:showDialogshowDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text("Judul Dialog"), content: Text("Isi dari Dialog"), actions: <Widget>[ FlatButton( child: Text("Tutup"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan Dialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek AlertDialog dengan properti title, content, dan actions. Kita juga menambahkan tombol tutup yang dapat ditemukan pada bagian bawah Dialog. Saat pengguna menekan tombol tutup, kita memanggil Navigator.of(context).pop() untuk menutup Dialog.Ini hanya contoh sintaks umum untuk membuat Dialog widget dalam Flutter. Ada beberapa variasi lain dari Dialog widget seperti SimpleDialog, BottomSheet, dll. yang dapat dibuat dengan sintaks yang berbeda.SimpleDialogBerikut adalah sintaks umum untuk membuat SimpleDialog widget dalam Flutter:showDialog( context: context, builder: (BuildContext context) { return SimpleDialog( title: Text("Judul SimpleDialog"), children: <Widget>[ SimpleDialogOption( child: Text("Pilihan 1"), onPressed: () { Navigator.of(context).pop(); }, ), SimpleDialogOption( child: Text("Pilihan 2"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan SimpleDialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek SimpleDialog dengan properti title dan children. Dalam children, kita membuat beberapa objek SimpleDialogOption sebagai pilihan yang dapat dipilih oleh pengguna. Saat pengguna memilih salah satu pilihan, kita memanggil Navigator.of(context).pop() untuk menutup SimpleDialog.
More detailsPublished - Wed, 01 Feb 2023
Created by - Kurnia Andi Nugroho
Stateless Widget
STATLESS WIDGETStatelessWidget adalah kelas yang digunakan dalam Flutter untuk membuat widget yang tidak memiliki state atau data yang berubah-ubah. StatelessWidget digunakan untuk membuat widget yang hanya digunakan untuk menampilkan data saja dan tidak memiliki interaksi dengan pengguna. Misalnya, widget yang digunakan untuk menampilkan teks atau gambar.Syntax dasar dari StatelessWidget adalah sebagai berikut:class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( // code to build the widget goes here ); } } Kelas MyWidget di atas adalah contoh kelas yang mengextend dari StatelessWidget. Fungsi build(BuildContext context) diimplementasi untuk mengembalikan widget yang akan ditampilkan. @override digunakan untuk menKitakan bahwa fungsi build diatas merupakan implementasi dari fungsi yang sudah ada di kelas induk (StatelessWidget).Secara umum, Kita harus menggunakan StatelessWidget jika widget yang Kita buat tidak akan berubah setelah dibuat. StatelessWidget ini sangat efisien dalam hal performa karena ia hanya akan dibangun sekali saat dibuat dan tidak akan dibangun kembali saat ada perubahan dalam aplikasi.PROPERTIBeberapa properti yang dapat digunakan dalam kelas StatelessWidget di Flutter adalah:key: digunakan untuk memberikan identitas unik pada sebuah widget sehingga dapat digunakan untuk melakukan operasi seperti animasi.child: digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini.color: digunakan untuk mengatur warna dari widget.padding: digunakan untuk menentukan jarak antara widget dengan batasnya.alignment: digunakan untuk menentukan posisi widget dalam container.constraints: digunakan untuk menentukan batasan ukuran widget.transform: digunakan untuk melakukan transformasi pada widget seperti rotasi, skala, dll.decoration: digunakan untuk menambahkan dekorasi pada widget seperti border, background, dll.Itu hanyalah beberapa properti yang bisa digunakan dalam StatelessWidget, namun masih ada yang lain yang tersedia dalam framework Flutter. Perlu diingat, setiap properti yang digunakan akan berpengaruh pada performa aplikasi jika digunakan dalam jumlah besar, sebaiknya digunakan dengan bijak dan sesuai kebutuhan aplikasi.EXAMPLEProperti child dalam StatelessWidget digunakan untuk menentukan widget anak yang akan ditampilkan dalam widget ini. Widget anak ini akan ditampilkan dalam container yang ditentukan oleh widget ini.Sintaks penggunaannya adalah sebagai berikut:class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Text("Hello World!"), ); } } Di contoh diatas, widget Text dengan teks "Hello World!" akan ditampilkan dalam container yang ditentukan oleh MyWidget. Kita dapat menambahkan beberapa widget anak dengan menggunakan widget lain sebagai child.Kita juga bisa menggunakan children property untuk menambahkan beberapa widget anak sekaligusclass MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( children: <Widget>[ Text("Hello World!"), Text("Hello World!"), Text("Hello World!"), ], ); } } Properti child atau children ini sangat berguna untuk menyusun layout dan mengelompokkan widget anak dalam satu widget induk.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
Macam Macam Widgets Flutter
WIDGETSWidgets Flutter adalah komponen visual yang digunakan dalam aplikasi Flutter untuk menampilkan dan mengatur tampilan. Widgets ini dapat digunakan untuk membuat layout, menambahkan interaksi, dan lain-lain. Widget Flutter dapat dikombinasikan dengan widget lainnya untuk membuat tampilan yang lebih kompleks.MACAM MACAM WIDGETSAda berbagai macam widget yang tersedia di Flutter, diantaranya:Container: digunakan untuk menampung widget lain dan memberikan gaya seperti ukuran, posisi, margin, dan padding.Row and Column: digunakan untuk mengatur posisi widget dalam baris atau kolom.Text: digunakan untuk menampilkan teks dengan berbagai jenis font, ukuran, dan gaya.Image: digunakan untuk menampilkan gambar dari file atau sumber internet.Button: digunakan untuk menambahkan tombol interaktif dengan berbagai gaya.Input: digunakan untuk menambahkan elemen input seperti text field dan checkbox.ListView: digunakan untuk menampilkan daftar item dengan scroll.Stack: digunakan untuk menumpuk widget satu di atas yang lain.Expanded: digunakan untuk mengatur ukuran widget sesuai dengan ruang yang tersedia.StreamBuilder: digunakan untuk membuat widget yang memantau stream dan mengubah tampilan sesuai dengan perubahan data.Itu hanya beberapa contoh widget yang tersedia di Flutter, masih ada banyak lagi yang dapat digunakan untuk membuat aplikasi yang interaktif dan menarik.CONATAINERSintaks dasar untuk menggunakan widget Container di Flutter adalah sebagai berikut:Container( width: double, height: double, margin: EdgeInsets, padding: EdgeInsets, decoration: BoxDecoration, child: Widget, ) width dan height digunakan untuk mengatur ukuran container.margin digunakan untuk menambahkan margin di luar container.padding digunakan untuk menambahkan padding di dalam container.decoration digunakan untuk memberikan gaya seperti warna latar, gradien, atau bingkai.child digunakan untuk menambahkan widget yang akan ditampung oleh container.Contoh:Container( width: 200, height: 200, margin: EdgeInsets.all(10), padding: EdgeInsets.all(20), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10) ), child: Text("Hello World"), ) Container diatas akan menampilkan sebuah teks "Hello World" dalam lingkaran biru dengan margin 10 dan padding 20.Perlu diingat bahwa setiap property/field yang dituliskan dalam sintaks diatas tidak harus diisi semua, sesuai kebutuhan aplikasi kita.
More detailsPublished - Wed, 25 Jan 2023
Created by - Kurnia Andi Nugroho
Komponen Framework7
Komponen merupakan bagian dari keseluruhan, begitu juga didalam framework7 terdapat banyak sekali components pendukung yang disediakan, hal ini tidak lain untuk mempermudah dalam pengembangan sebuah aplikasi berbasis mobile ataupun desktop dengan framework7. jika teman-teman sering mempelajari bahasa pemrograman HTML, maka nanti tidak akan asing dengan istilah components di framework7. Pada tutorial sebelumnya kita semua telah mengetahui cara instalasi dan inisialisasi framework7, pada pembahasan kali ini, saatnya kita akan belajar tentang komponen nya.Kami sarankan dalam mengikuti pembelajaran ini sembari membuka website official Dokumen dengan tujuan Agar proses pembelajaran menjadi lebih mudah. jika sudah, teman-teman bisa melihat beberapa komponen, mulai Accordion, Action sheet, Appbar Dst. untuk prakteknya, mari kita coba menerapkan komponen Toolbar/tabbar didalam aplikasi kita sebelumnya.seperti biasanya kita buka terlebih dahulu recent project kita menggunakan code editor.Perlu di ingat, dalam studi pembelajaran kali ini kita akan fokus pada satu bab saja yaitu tabbar/toolbar, toolbar sendiri memiliki beberapa jenis, mulai dari static toolbar, fixed toolbar, dan Common toolbar. pada project sebelumnya toolbar kita masih berupa static toolbar, yang mana tampilan nya masih sangat biasa,Gambar diatas merupakan toolbar dengan jenis static,kali ini kita akan mengeksplorasi fitur/jenis lainnya yang sudah disediakan di dokumen komponen framework7. kita bisa membuat tabbar dengan tampilan icon dan juga tulisan agar terlihat user friendly. sebelumnya kita harus menambhakan library font kedalam folder assets/.teman-teman bisa mengunduh via link github. ja sudah d unduh didalamnya terdapat folder fonts dan juga satu file css. untuk penempatannya akan kita lettakkan pada direktori assets, lebih lengkapnya seperti gambar dibawah ini.Untuk penempatan file css, disini kami meletakkan didalam satu folder css, agar lebih rapih dalam pengelompokkan jenis file.Sampai disini kita berhasil menaambah library fonts framework7 didalam project kita, yang jadi pertanyaannya adalah apa tujuan dari penambahan library ini? sebelum kami jawab, mari kita lanjutkan step berikutnya heheheh.mari kita menambah code <link rel="stylesheet" href="assets/css/framework7-icons.css"> kedalam file index.html lebih tepatnya didalam tag <head>, agar library yang kita tambahkan didalam folder assets terbaca oleh framework7, jika sudah maka akan seperti ini<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#2196f3"> <title>My App</title> <link rel="stylesheet" href="assets/css/framework7-bundle.min.css"> <link rel="stylesheet" href="assets/css/my-app.css"> <link rel="stylesheet" href="assets/css/framework7-icons.css"> </head> Setelah semuanya selesai kita bisa menggunakan fitur icons didalam framework7.untuk lebih lengkapnya, teman- teman bisa menggunakan cheatsheet berikut untuk dengan mudah menemukan ikon yang ingin teman-teman gunakan.Cara untuk menggunakan icon diatas adalah dengan menambahkan class <i class="icon f7-icons ">dot_radiowaves_left_right</i> code dot_radiowaves_left_right menunjukan nama icon yang hendak digunakan, ini merupakan contoh basic dalam penggunaan icons di framework7. kami menerapkan kode diatas kedalam tabbar, jadi toolbar/tabbar aplikasi kita akan berubah menjadi icon bukan static lagi.seperti gambar dibawah ini.Nah, kita berhasil merubah tabbar kita menjadi bentuk icons, bagaiamana? mudah bukan .untuk kelengkapan code index.html bisa teman-teman tinjau dibawah ini.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#2196f3"> <title>My App</title> <link rel="stylesheet" href="assets/css/framework7-bundle.min.css"> <link rel="stylesheet" href="assets/css/my-app.css"> <link rel="stylesheet" href="assets/css/framework7-icons.css"> </head> <body> <div id="app"> <div class="view view-main"> <div data-name="home" class="page"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Aplikasi Sederhana</div> </div> </div> <div class="toolbar tabbar tabbar-labels toolbar-bottom color-theme-green"> <div class="toolbar-inner"> <a href="#tab-4" class="tab-link tab-link-active"> <i class="f7-icons ">house</i> <span class="tabbar-label color-theme-green">Home</span> </a> <a href="#tab-6" class="tab-link"> <i class="icon f7-icons ">dot_radiowaves_left_right</i> <span class="tabbar-label color-theme-green">Informasi</span> </a> </div> </div> <div class="page-content"> <center> <p>Silahkan Mencoba</p> </center> <a href="/accordion/" class="inner-patient-col button button-raised color-orange">Accordion</a> <a href="/action/" class="inner-patient-col button button-raised color-lightblue">action sheet</a> <a href="/app/" class="inner-patient-col button button-raised color-pink">app bar</a> <a href="/area/" class="inner-patient-col button button-raised color-yellow">Area chart</a> <a href="/auto/" class="inner-patient-col button button-raised color-deeppurple">Auto Complete</a> <a href="/badge/" class="inner-patient-col button button-raised color-teal">Badge</a> <a href="/contentblock/" class="inner-patient-col button button-raised color-red">Content block</a> </div> </div> <div data-name="accordion" class="page stacked"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Accordion</div> </div> </div> <div class="toolbar toolbar-bottom"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> <div class="page-content"> <center> <p>Ini Halaman Accordion</p> </center> <div class="list accordion-list"> <ul> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 1</div> </div> </a> <div class="accordion-item-content">Item 1 content ...</div> </li> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 2</div> </div> </a> <div class="accordion-item-content">Item 2 content ...</div> </li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script> <script type="text/javascript" src="assets/js/my-app.js"></script> </body> </html>
More detailsPublished - Wed, 09 Nov 2022
Created by - Kurnia Andi Nugroho
Manajemen Page Framework7
Berlanjut pada sesi berikutnya yaitu manajemen page, atau juga bisa disebut dengan mengelola ataupun mengurus halaman. dalam hal ini kita bisa mengarahkan setiap komponen yang di click menuju halaman yang di tentukan.Oke langsung saja teman-teman buka kembali recent project pada tutorial sebelumnya.Kami menggunakan text editor Visual Studio, teman teman bisa menggunakan text editor kesukaan teman-teman. oke, ditinjau dari gambar diatas saya menaruh project didalam folder framework7 di direktori C:/Xampp/htdocs/framework7. Hal ini ketika nantinya diakses melalui browser, dengan menggunakan web server local maka akan menghasilkan URL localhost/framework7.yang perlu diperhatikan dalam manajemen page adalah pada kode <div data-name="home" class="page">. Data name mengidentifikasikan nama halaman yang kita buat, sedangkan class merupakan definisi type halaman tersebut. berarti halaman diatas mempunyai nama home dan class page, jadi ketika teman-teman mengakses localhost/framework7 maka yang ditampilkan adalah halaman tersebut.diatas merupakan tampilan ketika teman-teman mengakses nya. panah nomor 1 menunjukkan Navbar, Sedangkan nomor 2 merupakan Content, pada panah nomor 3 merupakan Toolbar . banyak template ataupun customisasi yang disediakan. ini merupakan basic dasar untuk mengetahui tata letak kerangka framework7.nah, pada pembahasan kali ini kita akan membuat halaman baru, agar kita bisa berpindah dari halaman satu menuju halaman lainnya. Berikut contoh sederhana listing code untuk mencoba manajemen page di dalam framework7<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#2196f3"> <title>My App</title> <link rel="stylesheet" href="assets/css/framework7-bundle.min.css"> <link rel="stylesheet" href="assets/css/my-app.css"> </head> <body> <div id="app"> <div class="view view-main"> <div data-name="home" class="page"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Aplikasi Sederhana</div> </div> </div> <div class="toolbar toolbar-bottom"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> <div class="page-content"> <center> <p>Silahkan Mencoba</p> </center> <a href="/accordion/" class="inner-patient-col button button-raised color-orange">Accordion</a> <a href="/action/" class="inner-patient-col button button-raised color-lightblue">action sheet</a> <a href="/app/" class="inner-patient-col button button-raised color-pink">app bar</a> <a href="/area/" class="inner-patient-col button button-raised color-yellow">Area chart</a> <a href="/auto/" class="inner-patient-col button button-raised color-deeppurple">Auto Complete</a> <a href="/badge/" class="inner-patient-col button button-raised color-teal">Badge</a> <a href="/contentblock/" class="inner-patient-col button button-raised color-red">Content block</a> </div> </div> </div> </div> <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script> <script type="text/javascript" src="assets/js/my-app.js"></script> </body> </html> Dari kode diatas, kita telah menambahkan beberapa button dihalaman home, hal ini sebagai contoh kecil untuk mencoba berpindah dari halaman satu menuju halaman lainnya. Salah satunya terdapat button accordion, diharapkan ketika kita melakukan click pada button tersebut maka kita akan diarahkan menuju halaman accordion.bisa di lihat hasilnya seperti gambar dibawah ini.kita tambahkan parameter stackPages yang berada pada file my-app.js.var app = new Framework7({ el: '#app', name: 'My App', id: 'com.myapp.test', panel: { swipe: true, }, view: { stackPages: true, }, routes: [ { path: '/about/', url: 'about.html', }, ], }); var mainView = app.views.create('.view-main'); oke sampai disini kita berhasil menambahkan parameter stackPages dan merubah nilainya menjadi true. hal ini bertujuan agar pembuatan halaman bisa dilakukan dalam satu file saja, yaitu didalam file index.html.langkah selanjutnya kita cukup membuat div baru di dalam file index.html tepatnya dibawah div penutup dari class page pertama. Listing code dibawah ini merupakan contoh sederhana untuk halaman accordion. <div data-name="accordion" class="page stacked"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Accordion</div> </div> </div> <div class="toolbar toolbar-bottom"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> <div class="page-content"> <center> <p>Ini Halaman Accordion</p> </center> <div class="list accordion-list"> <ul> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 1</div> </div> </a> <div class="accordion-item-content">Item 1 content ...</div> </li> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 2</div> </div> </a> <div class="accordion-item-content">Item 2 content ...</div> </li> </ul> </div> </div> </div> <div data-name="accordion" class="page stacked"> data name accordion untuk nantinya kita gunakan dalam proses routing atau pengarahan halaman didalam file my-app.js sedangkan class page stacked bertujuan agar ketika halaman home diakses maka halaman ini tidak akan tampil bisa dikatakan untuk memaniplasi halaman ini dibawah halaman home. Untuk daftar lengkap code index.html bisa dilihat seperti dibawah ini.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#2196f3"> <title>My App</title> <link rel="stylesheet" href="assets/css/framework7-bundle.min.css"> <link rel="stylesheet" href="assets/css/my-app.css"> </head> <body> <div id="app"> <div class="view view-main"> <div data-name="home" class="page"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Aplikasi Sederhana</div> </div> </div> <div class="toolbar toolbar-bottom"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> <div class="page-content"> <center> <p>Silahkan Mencoba</p> </center> <a href="/accordion/" class="inner-patient-col button button-raised color-orange">Accordion</a> <a href="/action/" class="inner-patient-col button button-raised color-lightblue">action sheet</a> <a href="/app/" class="inner-patient-col button button-raised color-pink">app bar</a> <a href="/area/" class="inner-patient-col button button-raised color-yellow">Area chart</a> <a href="/auto/" class="inner-patient-col button button-raised color-deeppurple">Auto Complete</a> <a href="/badge/" class="inner-patient-col button button-raised color-teal">Badge</a> <a href="/contentblock/" class="inner-patient-col button button-raised color-red">Content block</a> </div> </div> <div data-name="accordion" class="page stacked"> <div class="navbar"> <div class="navbar-bg"></div> <div class="navbar-inner"> <div class="title">Accordion</div> </div> </div> <div class="toolbar toolbar-bottom"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> <div class="page-content"> <center> <p>Ini Halaman Accordion</p> </center> <div class="list accordion-list"> <ul> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 1</div> </div> </a> <div class="accordion-item-content">Item 1 content ...</div> </li> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">Item 2</div> </div> </a> <div class="accordion-item-content">Item 2 content ...</div> </li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script> <script type="text/javascript" src="assets/js/my-app.js"></script> </body> </html> setelah teman-teman berhasil menggabungkan antara page dan stack page, langkah selanjutnya adalah menambahkan parameter route di file my-app.js.var app = new Framework7({ el: '#app', name: 'My App', id: 'com.myapp.test', panel: { swipe: true, }, view: { stackPages: true, }, routes: [{ path: '/accordion/', pageName: 'accordion' }, ], }); var mainView = app.views.create('.view-main'); pada baris routes diatas kita bisa melihat ada path dan juga pageName, path disini berarti kita harus mencantumkan dimana nantinya halaman ini kita akses, pada kode seblumnya kita melettakan pada button dengan kode <a href="/accordion/" nah ini harus sama dengan path di route kita. Sedangkan pageName adalah page stacked yang tadi kita tambahkan di halaman index.html. jika button accordion kita click, maka kita akan diarahkan menuju halaman accordian yang baru saja dibuat .kurang lebih seperti gambar dibawah ini.Sampai disini semoga teman-teman berhasil melakukan percobaan manajemen page . Jika teradapat problem, mari sama sama kita selesaikan dikolom komentar untuk berdiskusi
More detailsPublished - Tue, 08 Nov 2022
Search
Popular categories
Flutter
5Framework7
4Latest blogs
Flutter Widget ListTile
Thu, 02 Feb 2023
Flutter Widget Dialog
Wed, 01 Feb 2023
Stateless Widget
Wed, 25 Jan 2023
Write a public review