10.Flutter - App Scaffold


Flutter membantu pembuatan default aplikasi mobile menjadi sangat mudah dan cepat oleh karena itu pada saat membuat project baru, kita akan diberikan kode yang dihasilkan secara otomatis, dimana pada kode ini terdapat Thema, App Bar, Content Area, Count dan Floating Button.

Ketika kita menjalankan kode tersebut, maka metode main akan memanggil runApp untuk menyiapkan widget yang kita gunakan, metode build dari App Widget di panggil dan mengembalikan object MaterialApp, dimana objek ini memberikan informasi kepada Flutter untuk menghasilkan widget beserta child widgetnya dan menampilkannya pada layar.

Theme

Ketika kita melakukan build aplikasi Flutter, kita melakukan build pada root Widget, yaitu widget yang biasanya mengembalikan MaterialApp, dimana ini adalah fondasi dari aplikasi kita, salah satu konstruktor dari MaterialApp ini adalah objek Theme, objek ini mengatur warna yang digunakan pada widget aplikasi kita, kita bisa memberikan tema ke MaterialApp mengguankan objek ThemeData.


Berikut adalah contoh sederhana menggunakan tema, modifikasi kode pada ThemeData seperti berikut:



sebagai tambahan, terdapat juga bebereapa konstruktor MaterialApp, yaitu:

  • debugShowMaterialGrid
  • showPerformanceOverlay
  • checkerboardRasterChacheImages
  • checkerboardOffscreenLayers
  • showSemanticsDebugger
  • debugShowCheckedModeBanner

Scaffold

Menyediakan standar struktur layout yang dapat kita gunakan dalam membuat aplikasi, dimana pada widget Scaffold ini terdapat default widget seperti

AppBar

Pada AppBar terdapat title, icons dan menu, dimana widget ini berfungsi untuk menampilkan title beserta icon-icon yang diperlukan, dimana user bisa melakukan tap untuk berinteraksi pada icon tersebut, untuk menambahkan widget AppBar kita gunakan argumen konstruktor appBar ketika membuat Scaffold


Body

Pada Body kita bisa menambahkan widget-widget yang kita butuhkan untuk ditampilkan pada content area.

BottomNavigationBar

Tempat untuk untuk meletakkan tombol navigasi pada bagian bawah (dibawah body, BottomSheet dan PersistentFotterButtons), gunakan BottomNavigationBarItem agar user dapat melakukan tap pada icon, gunakan argumen konstruktor bottomNavigationBar untuk menambahkan widget BottomNavigationBar pada Scaffold.


Drawer

Drawer adalah tampilan yang muncul dari sisi aplikasi, umumnya berisi item menu dan akan memenuhi setengah dari layar ketika muncul, untuk menambahkan widget Drawer dapat digunakan argumen konstruktor drawer pada Scaffold, pada saat widget ini dibuat makan menu Hamburger pada AppBar akan dibuat secara otomatis, Drawer juga bisa dipindahkan ke sisi sebelah kanan dari aplikasi dengan menggunakan argumen konstruktor endDrawer (ini tidak menunjukkan menu hamburger).

BottomSheet

digunakan untuk menampilkan informasi kepada user tanpa harus mengganti context dari yang user lihat, terdapat juga ModalButtonSheets yang dapat memblock user interface sampai user memilih pilihan yang diberikan, untuk menambahkan BottomSheet widget dapat digunakan argumen konstruktor bottomSheet.

PersistentFooterButtons

digunakan untuk menampilkan sekumpulan widget pada bagian bawah dari Scaffold tetapi diatas BottomNavigationBar dan dibawah Body dan BottomSheet.


Final Code.

10.Flutter - App Scaffold 10.Flutter - App Scaffold Reviewed by jc on October 03, 2019 Rating: 5

No comments:

Powered by Blogger.