02.Flutter - Widget



Widget

update april 2020, source code di github dan code dibuat dengan Flutter 1.12.13+hotfix.9

Pada flutter dikenal dengan istilah "everything is a Widget" yang artinya adalah semua adalah Widget, widget bisa juga kita banyangkan sebagai objek-objek yang dikonfigurasi sedemikian rupa, dari pada objek grafik (tidak harus terlihat).

Google memiliki standart user interfacenya sendiri yang disebut Material, yang digunakan disemua product Google, oleh karena itu Flutter widget mendukung tampilan Material Design secara default, sehingga kita mendapatkan User Interface yang cantik tanpa harus mendesainnya dari awal.

Flutter melakukan pekerjaan rendering widget dilayar perangkat asli/emulator kita, tetapi widget tersebut memerlukan configurasi seperti: apa warna widgetnya, apakah ada bordernya, apakah widget tersebut berisi widget lainnya, dll, ketika flutter melakukan rendering sebuah widget, maka flutter akan memanggil sebuah metode yang bernama "build". Metode tersebut mengembalikan (return) object bertipe Widget yang memberikan Flutter informasi berupa konfigurasi-konfigurasi tentang widget tersebut ataupun child widgets yang terdapat didalamnya. Perhatikan potongan kode berikut:


Pada metode "build" terdapat satu buah argumen bertipe BuildContext dan mengembalikan objek bertipe Widget "Widget build(BuildContext context)", pada contoh kode diatas metode "build" mengembalikan objek widget yang berisi data informasi konfigurasi object tersebut yaitu memberitahu Flutter perlu merender widget MaterialApp dengan title: 'Flutter Demo', theme: ThemeData, home: MyHomePage. Untuk melihat widget-widget yang terdapat pada flutter kunjugi https://flutter.dev/docs/development/ui/widgets

BuildContext

Flutter Widget bisa berisi widget lainnya, ini sering juga disebug Widget Tree (struktur widget), argumen/parameter dari metode "build" yaitu "BuildContext" memberikan informasi tentang lokasi dari widget tersebut didalam struktur widget (Widget Tree). Untuk lebih mengerti fungsi dari BuildContext kunjungi https://engineering.liefery.com/2019/02/18/flutter-for-newbies-why-you-should-care-about-the-build-context.html

Minimal Flutter App

Berikut adalah aplikasi minimal Flutter untuk mendemonstrasikan apa itu widget, contoh ini diambil dari https://flutter.dev/docs/development/ui/widgets-intro

Buat sebuah project baru, kemudian pada folder lib/ buka kode main.dart dan hapus seluruh kode yang telah dibuat secara otomatis oleh Flutter, dan ketik kode berikut:

Jalankan programmanny pada terminal VSCode dengan perintah flutter run.



Fungsi runApp() berisi satu buah argumen bertipe Wiget dan menjadikannya sebagai root dari widget tree (struktur wiget), dari contoh tersebut, widget tree ini terdiri dari dua buah widget, yang pertama adalah Center dan childnya yaitu Text, jika kita banyangkan seolah olah widget Text berada didalam widget Center.

02.Flutter - Widget 02.Flutter - Widget Reviewed by jc on July 15, 2019 Rating: 5

No comments:

Powered by Blogger.